NetMonitor. Making UI more efficient

After releasing the first more-or-less useful version of NetMonitor, I’ve been playing with it in different environments and situations, trying to realize whether the current UI is efficient enough for providing useful information about the network health in a form that can be grasped quickly, without spending noticeable amount of time on data parsing and understanding. Also, I’ve been observing the usage of controls that are located at the main window.

Here is how it looked originally:

 

After a week or two, I’ve made the following observations:

1. Buttons “Start” & “Stop” in this tiny application are useless at all. I’ve noticed that while I had to push “Start” button in order to begin the monitoring process, I never pushed “Stop” button when I wanted to stop the monitoring, because closing the application seemed more natural to me as a regular user. Also, I’ve realized that pushing “Start” button is the excess step, I’d prefer an application, at least this simple one, would start functioning immediately, without additional clicks. So, I’m removing the toolbar with the buttons and launching the monitoring right from the start.

2. Information that is presented in Data panel was also a subject for the investigation. I realized that some columns are more important and other are less. For example, columns “Host” and “Response time” were those I paid much attention to, while “Address” and “Health” were less convenient for me. As for “Host” vs. “Address”: I think that a human-being prefers to operate with more natural textual names for hosts instead of IPs or internet addresses with those “www”, “com”, etc. Moreover, internet address is required for application only, a user wants to know how much is response time for “my router”, “my vpn server”, “my website”, etc., and not for “192.168.0.1”, “10.0.0.66” or other stuff constructed from weird combination of digits and dots.

So, first of all I’ve removed the toolbar. That was rather easy and didn’t take much time. The most difficult task was how to reorganize the data presentation to provide better visualization. I’ve been experimenting with various patterns and understood that there couldn’t be a good solution unless I refuse using DataGrid as a presentation pattern. So I began probing with direct item templates for `ListView` control. After a while a fresh new look for NetMonitor was born:

This information layout focuses on the important data: human readable host names and response time, while other potentially useful information such as IP address, is less expressed. Moreover, the important pieces of data are located closer to each other and it is more convenient for eyes and brain to grasp the connected pieces of information.

The solution was simple. I removed `ListView.View` and nested `GridView` nodes and add a DataTemplate for a ListView. Nothing special:

<ListView.ItemTemplate>
  <DataTemplate>
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>
      <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Name}"
         FontSize="18.667" Margin="5,0,0,0" />
      <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding ResponseTime}"
         FontSize="18.667" HorizontalAlignment="Right" Margin="0,0,5,0" />
      <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Address}"
         FontSize="10.667" Margin="5,0,0,5" />
      <TextBlock Grid.Row="1" Grid.Column="1" Text="ping"
         FontSize="10.667" HorizontalAlignment="Right" Margin="0,0,5,5" />
    </Grid>
  </DataTemplate>
</ListView.ItemTemplate>

After that small achievement I got closer to the point of feeling the dark power of WPF =)

P.S.
The repository is updated, binaries are available here, as usual.