.NET Tips and Tricks

Blog archive

Attracting the User's Attention in CodeRush

This is a continuation of my last blog with Mark Miller, chief scientist at Developer Express, about what his company has learned about user interface design in creating CodeRush. One of the issues in CodeRush is attracting the user's attention to what's important, which Mark addresses in this blog.

Before going to Mark's feedback, I wanted to feature one quote what seemed to me like very good advice from Mark: "Watch product demonstrations and look for moments when the presenter takes too much time explaining and pointing to the UI. These moments generally indicate opportunities to improve the UI using these guidelines."

Mark Miller: Everything onscreen is information. For example, data in a table, lines delineating the table cells, and the border around the table. But not all information is equally relevant. For example, the data in a table is much more important than the lines separating the cells.

If you're going to add less relevant information, make it both easy to find and easy to ignore. This usually means making each type of information visually distinctive in shape or size and less relevant information lower in contrast... which leads to matching emphasis to information relevance. For example, you should dial up the contrast for more important information and dial it down for less important information.

Use animation when you need to attract the gaze of your customers. This is extremely useful when resurfacing from a recent drilldown into data. To reduce cognitive friction while navigating, it is helpful to restore previous views into data as you bubble out (scrolling or scaling the data appropriately so it fits within the view just as it did when the customer previously drilled down).

In addition, you often want to restore a caret or cursor into that data view. Carets are sometimes small and hard to see when the view is vast. Imagine a very large monitor showing many lines of code and suddenly changing the position of the caret relative to the view -- try to find it). Animation can help draw the eye into that newly repositioned caret location, which may often be at a very different location than where the customer was previously looking. A low-contrast locator beacon animates to reveal a new caret position as part of restoring a previous view into the code.

Animation is also useful when onscreen elements are physically moved by the user. It's so much easier to see what's happening. Compare a smoothly animated repositioning to an instant redraw, which is sometimes easy to miss. Another tip: when animating, acceleration and deceleration are both good because they mimic the natural motion we see in the world every day.

Posted by Peter Vogel on 10/04/2010 at 1:16 PM


comments powered by Disqus

Featured

  • Death of the Dev Machine?

    Here's a takeaway from this week's Ignite 2020 event: An advanced Azure cloud portends the death of the traditional, high-powered dev machine packed with computing, memory and storage components.

  • COVID-19 Is Ignite 2020's Elephant in the Room: 'Frankly, It Sucks'

    As in all things of our new reality, there was no escaping the drastic changes in routine caused by the COVID-19 pandemic during Microsoft's big Ignite 2020 developer/IT pro conference, this week shifted to an online-only event after drawing tens of thousands of in-person attendees in years past.

  • Visual Studio 2019 v16.8 Preview Update Adds Codespaces

    To coincide with the Microsoft Ignite 2020 IT pro/developer event, the Visual Studio dev team shipped a new update, Visual Studio 2019 v16.8 Preview 3.1, with the main attraction being support for cloud-hosted Codespaces, now in a limited beta.

  • Speed Lines Graphic

    New for Blazor: Azure Static Web Apps Support

    With Blazor taking the .NET web development world by storm, one of the first announcements during Microsoft's Ignite 2020 developer/IT event was its new support in Azure Static Web Apps.

  • Entity Framework Core 5 RC1 Is Feature Complete, Ready for Production

    The first release candidate for Entity Framework 5 -- Microsoft's object-database mapper for .NET -- has shipped with a go live license, ready for production.

Upcoming Events