Window’s device manager is an ancient tool to allow administrators to monitor hardware attached to their computer. Device manager has been around since Windows 95, and over the years its tried and true design hasn’t changed much at all. However, with Microsoft acknowledging that the present and future of UI design doesn’t promise a mouse and keyboard, I think it’s time that Device Manager got the redesign it sorely needs. Currently, Device Manager suffers from the following issues:

  1. It’s not designed for touch devices
    • Device manager still uses tiny iconography and bunched together text to get the work done. Add to that, it doesn’t scale to up larger screens, so there’s a lot of unused space.
    • Device manager also relies heavily on lists, which means that the organisation of content is critical. Device manager uses a lot of esoteric wording and doesn’t seem to have a clear logic to the organisation of lists or top-level categories. For example, why is Xbox 360 Peripherals not within Universal Serial Bus Controllers or Sound, Video and Game Controllers? It has a separate root-level category
  1. Its design doesn’t match the rest of Windows 10
    • Device manager has a lot of unused white space
    • Device manager has no dark theme
    • The iconography doesn’t match the design scheme of Window 10, which uses single-colour icons with clean wiry lines instead of full-colour rendered icons
    • The UI doesn’t make use of gestures for navigation on touch devices, and the forward and back buttons aren’t always in use by the program
  1. Device Manager isn’t searchable
  1. Customising entries in Device Manager will open a separate window instead of using the space it already has

It’s clear that while Device Manager is an old piece of software that has never needed to be upgraded. While the design it old, it’s good for a few things:

  • Checking for hardware changes
  • Updating software either using windows Update or local drivers
  • Uninstalling the drivers for devices
  • Rolling back the drivers for a device
  • Disabling devices
  • Checking for device errors
  • Viewing device details
  • Viewing device events
  • Checking device status

Therefore, any redesign of Device Manager needs to retain these key functions.

UI Conventions

What makes a UI ‘good’? A good UI is so self-evident and unambiguous that we can navigate them in autopilot. Whether it’s minimal, flat, skeuomorphic, ‘Material’, ‘Fluent’, designed for phones, tablets, computers or sensory experiences, there are commonalities that make good Interface design critical.

Composition

The layout of every element on a page is the first port-of-call when designing UI. Composition relies on an understanding of the way people perceive interfaces. Steve Krug’s book Don’t Make me Think (New Riders Publishing, 2006) highlights some important considerations for compositing UI for the Web, but many concepts follow through to other applications.

People in western cultures will look at a page from the top left corner down to the bottom right — the same way that we read. So critical UI elements will start in the top-left corner and less important ones should be at the bottom, leaning to the right. Designers should also consider the way the eye moves from these points, and provide leading lines to connect the elements of the page so that the user can scan the page instead of put effort into finding what they need.

Hierarchy

Creating a sense of hierarchy will guide the user’s eye from parent elements down to their children. The key components to create hierarchy are: Proximity, Scale and Typeface

Proximity

As Krug explains, logically related elements should be visually related. Like branches in a tree, the trunk is the largest section, and by following the smaller branches the user can make a choice about where to go, knowing that the smaller and further branches will still relate to the larger ones, only with more minuscule and specific variations. 

For example, a road sign makes visual sense when placed next to the road it is referring to, because the elements are logically and visually related to each other. An essay makes sense if its title and constituent paragraphs are only a few lines away from each other.

But proximity itself helps the user infer information about the subject. Like in Film, two shots next to each other will create meaning in one-another and develop a story. An unmarked aerosol can in the Hygiene aisle in a supermarket might seem like deodorant, but when placed in the cleaning aisle, it could be a cleaning spray, or when placed among tools it may be a mechanical lubricant.

Scale

Scale is the relationship between UI elements by size. Following the tree branch example from before, thicker parts of the trunk — where the user makes broader decisions about where they want to go — will use bigger fonts because the user’s eye should start at the top of the hierarchy and follow it down. Elements at the same “level” in the hierarchy are the same size, indicating they’re no more or less important or prominent than each other.

Typeface

The more esoteric of the three, Typeface is all about fonts and how the thickness, underlining and italics augment the reading experience. The human eye will naturally seek out contrasting elements before any others, and so using emboldened fonts to compliment your hierarchy will guide the user’s eye.

 

Windows UI Conventions

The next step in updating Device Manager’s UI is to examine the UI conventions throughout Universal Windows Apps in Windows 10. Some touchstones here are Settings and Explorer.

Settings

Settings contains all of the updated options throughout Windows 10. Not all of the available settings are in this menu but it does contain a vast amount of customisation for users. Settings supports touch-enabled devices and similar to Device Manager, works to contain a breadth of settings into a weightless series of menus that are only around 1-2 levels deep.

settings-app-windows-10-au

The settings app organises its options into categories. Each option has a subtitle to subcategorise the options within it. The iconography also communicates which part of the experience the options relate to. For instance, the Accounts icon relates to you, hence the icon of a person, devices relates to peripherals, system relates to the computer, personalisation to artistic expression — you get the idea. The Home page reduces the clutter and requires less thought to navigate from the home screen to the desired setting. Device Manager’s one-page drop down menu can become very cluttered, and the lack of informative iconography and categorisation make using it convoluted and occasionally frustrating.

Explorer

While not properly updated to be a Universal Windows App, Windows’ File Explorer has a lot we can take from its design.

Being a file Browser, File Explorer solves the convoluted mess of trying to navigate a rich tree of folders throughout a hard drive. The challenges that Explorer solves are:

  • Informing the user of their location at any given stage
  • Giving the user a sense of direction as they navigate
  • Reducing the apparent “scale” of the average windows file tree. Many folders are hidden, and default user shortcuts make accessing common locations extremely easy and visible.

The key to UI navigation like this is the sidebar, which provides a visual representation of where along the tree you are. The sidebar combines common locations in Quick Access, third-party locations like OneDrive, as well as every drive connected to your computer, network and home group. Quick Access ties into the categorisation I mentioned previously, and using this sidebar as a navigation tool is faster for mice (less total movement) and easy to view your position in the hierarchy.

The category currently selected is emboldened in some way to help with visibility.

Dropping a category will only display the folders within, to reduce the space the hierarchy takes up.

This design philosophy already resembles Device Manager’s UI solution, however combined with the Setting’s menu’s fuller content viewer it should provide a more elegant and viewable navigation experience

windows-8-1-this-pc

Combining the Concepts

Combining Explorer’s sidebar with the full window of Settings will create a multi-usage UI fit for both keyboard and mouse. Touch users can use a Settings-style window and mouse users can rely on the sidebar.

Furthermore, Search will be added to Device Manager to take the effort out of finding devices. Settings and Explorer both benefit with Search and Device Manager will be no different.

Understanding User Habits

Thanks to Steve Krug, we can understand how users really use the web compared to our ideal vision of how they do:

Users don’t read pages, they scan them

Big walls of text will put people to sleep, the best way to keep users moving through the interface is to keep text minimal, and to use iconography and drag them through each window

Users will choose the first reasonable option instead of the best one

Under pressure, how do you make decisions? If time is of the essence, would you sit down and weight everything up? Sometimes you can’t do the math, you just need to jump on the first reasonable option. This is an area that device manager fails, there are too many “audio” entries, and too many “controllers”. Let’s minimise the clutter and make sure the first option is the most relevant

Users will bring habits from their other programs into yours

This is why UI conventions are so important, everything needs to work the same way every time, so you won’t ever have to teach a user how to use your website or app, they already know how it works.

Brainstorm:

Content Window

The content window is the touch-optimised navigation area where the primary content will be displayed. Items will be arranged in grids for touch-optimised users to easily select and traverse folders or select list items. 

Categorisation

My next gripe with Device Manager is the categorisation. Or the lack thereof.

For example, Why are Audio Inputs and Outputs separate from  Sound, Video and Game Controllers? Why are Storage Controllers separate from disk drives? Why is my Xbox 360 Controller not within Game Controllers? Why aren’t display Adapters and Monitors together? Why are Printers listed in Print Queues? Half the culprit here is the weird categorisation, and the other half are the poor naming conventions.

  • I think that Controllers – Audio, Video, Game, Storage and USB Controllers should be within System – because they relate to the system. They should have a separate category called Controllers
  • Keyboards, Mice and Gamepads should be within a category called Peripherals
  • Printers and Printing Queues should be in a category called Printing
  • Monitors and Graphics Devices should be in a category called Visuals
  • Audio in and Out should have a category called Audio
  • Processors, Disk Drives, System Devices should be put under System
  • Network Adapters should have their own category called Networking

You don’t lose any of the devices but the UI is much less cluttered and provides links to many popular options. If you want to uninstall your Graphics drivers, go to visuals. If your gamepad needs a driver, go to peripherals. If you need to customise the controllers within your PC, go to System. I think it provides a much more elegant and simplified layout.

This is the categorisation I came up with:

Categories:

  • Audio
    • Inputs
    • Outputs
    • Sound Controllers
  • Visual
    • Monitors
    • Graphics Devices
  • System
    • Storage
      • Storage Controllers
      • Disk Drives
    • Processors
    • USB Controllers
    • System Devices
    • Software Devices
    • Computer
  • Peripherals
    • Mice
    • Keyboards
    • Game Controllers
  • Printing
    • Print Queue
    • Printers
  • Networking

Search

The entire thing should be SEARCHABLE.

Sidebar

The left sidebar is the persistent menu that follows the user around everywhere. It makes sense to place navigation within here, as well as any important and persistent buttons. For example, “Check for Changes” is a persistent utility and makes sense to be placed where it is always accessible.

However, because Properties is redundant if you double-click on a list item, we can remove that. As well as any mention of the Action Pane, as you’ll read below. The forward and back items will be redundant with the new navigation style, we can ignore those too.

Action Pane

It’s got a bad name, but the Action pane is the “see more” menu item of the Device Manager. In its current form, the Action Pane does nothing for Device Manager aside from charging the sorting order, which is already done through the “View” menu bar element, so we can ignore its functionality. While normally, double clicking on a list item will invoke a separate window with the Device’s properties, I don’t want the user to leave the window at all. We can reuse the Action Pane to invoke over the right-hand side of the screen and provide the same experience and breadth of options as the Properties window. By selecting an item within the Device Manager’s content, the Action Pane with invoke.

Mockup

Combining these concepts, the resulting layout with a better content view, flanked by the sidebar for tree-like navigation, and the Action bar for critical information:

Untitled drawing

With this layout arranged, I can now head into Adobe Experience Design to prototype it.

Mockup with Adobe Experience Design

Adobe Experience Design is an app created by Adobe to allow users to design modern app experiences and prototype their functionality. Users can design interfaces for the majority of screen shapes and sizes available on the market.

Home Page

Content View

The Home Page’s Content View is the central point all users will start. The Content Window items are arranged into a grid of categories that users are most likely to use. The icons properly reflect the subject matter while also resembling Windows’ other iconography, using thin, clean lines and minimal shapes.

Screen Shot 2017-08-25 at 11.48.00 am

Sidebar

The sidebar is the tighter and more mouse-optimised section of the Device Manager. Mouse users can easily click through the drop downs like they regularly would with device manager. With Windows’ greater focus on typography, we can omit the icon in the drop downs that Device Manager normally has and instead let the text do the talking. The currently selected section (which appears in the Content View) will become bold.

The only button that needs to be in this menu is the Scan for Changes, which is universal and should be accessible regardless of where the user is within the app (you never know what’s going to happen with Devices in Windows).

Visual Category

The Visual page is opened when the user clicks on the ‘Visual’ element from the Home Window. Within here, the user traverses into the next category of items. The user can click on ‘Monitors’ to view and customise the monitors connected to their computer, or they can view the Graphics hardware connected to their computer. In this example, the user has clicked on their graphics card to open the Action Panel for that card.

Screen Shot 2017-08-25 at 11.48.46 am

Action Panel

The user can view advanced information about their graphics card, as well as be able to perform actions, such as Update, Roll Back their drivers, or disable and uninstall them. The Details, Events and Resources tabs are arranged at the bottom in drop-down tabs. This layout is more touch-optimised, with large buttons and scrollable interfaces that do not open in a separate window

Screen Shot 2017-08-25 at 11.48.56 am

Limitations

While I believe this design will help the Device Manager work better for Microsoft’s Surface tablet users and all others using touchscreens, there are some limitations that are worth mentioning. The predominately textual nature of Device Manager may mean that some text will be hidden or omitted in this version, because a touch-optimised interface is less dense to make room for larger buttons. This interface may also be slower for some mouse users who do not use a touch screen and may dislike the distance between interface elements.

This design is also lacking Microsoft’s Segoe UI font family, which is the default font on Windows. This design uses the similar Helvetica Nueue, which is similarly thin and great for displays, but looks weird next to Segoe.

Conclusion

Windows’ Device Manager – like many ancient interface elements throughout Windows 10, desperately needs an upgrade. As the owner of a Surface Pro 3, it’s frustrating that Microsoft markets the device as a tablet with how unusable Windows 10 is without a mouse and keyboard. This post will hopefully demonstrate that creating a suitable interface for their family of devices isn’t rocket science and only requires some thought and creativity. I hope that Microsoft’s Fluent Design system is fully realised, and Windows is truly usable with touch, pen, mouse and keyboard, and other sensory experiences. The future is very exciting and I can’t wait to get my hands, fingers, mice, keyboards, VR headsets, eyeballs, mobile devices, voice, and pens onto it.

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s