Persistent Inappeasable Mind

Web browsers on Windows OS - comparison of vertical vs. horizontal tabs

nospam@example.com (Matjaž Kljun) — Mon, 20 May 2013 12:21:00 +0200

In the previous post I talked about how I got to use the Windows laptop for a month. It is a whole another experience I must admit. The major difference (excluding the OS and software) is my screen size (being now a staggering 12.1 inches on my Lenovo ultraportable x61s).

I'm a big advocate of vertical tabs in UI. Almost all (if not all) desktop and laptop screens (excluding phones and tablets!) are growing horizontally. So the extra space on the side could easily be used for ... you guessed it - TABS.

With 12 inches screen (1024x768) I had to reconsider the vertical vs. horizontal tabbing. I took a look at all major web browsers and opened 15 tabs (# of usually opened tabs) in each of them. The things to consider were:

1. How many tabs are visible at once (visibility is crucial for an overview of everything available)
2. How the tab UI helps as reminder to tasks to be done (people use all sorts of clues as reminders in all PIM tools - e.g. moving files to the desktop or un-marking email as read)
3. How tabs can be navigated (navigation has to be easy and improve both visibility and 'remind-ability')

Internet Explorer 10: IE can show only 8 tabs at once at this resolution. Tabs are hidden and reminding is greatly affected. Although a list of all tabs can be shown by clicking the IE icon on the Windows TaskBar. Navigating the tabs is tedious as well. The small chevrons/arrows on each side of the tab's list are small. Vertical scroll with the mouse scroll button (the one that also moves left and right) is not working which makes the things worse. Tabs are also small and only one Letter of web page title is not helpful.

Google Chrome: Tabs list is better as it spans over the whole browser's window. In chrome all windows are visible all the time although they get squashed and don't provide reminding capabilities. Beyond 20 tabs all the favicons disappear which makes the reminding, visibility and usability worse (see next image of the 30 tabs being opened). Maybe there's an option to list them (Vertical tabs extension provides a list similar to the above in IE). Sadly Chrome does not support real vertical tabs anymore.

30 tabs opened in Chrome. No favicons are shown and there's no way of telling what's under each tab.

Firefox + Tree Style Tab extension: Still my favorite, despite the small screen resolution that makes me sometimes scroll web content horizontally. But visibility, reminding function (favicons + page titles) and navigation are all there.

With vertical tabs, Firefox shows only 9 tabs at once at this resolution and navigating left and right on the tab's list can be done by clicking on chevrons/arrows on both sides of the list (similar to IE). This can be tedious as the mouse pointer has to move from one side of the screen to the other. Horizontal scrolling with the mouse is not working. The spatial tab management is possible with Tab groups (which clearly helps visibility and navigation). But navigating from the tab's list to the spatial tabs layout and back switches the context an Tab groups are not always visible while browsing.

Safari: It shows 9 tabs only as Firefox, but the navigation on the list is done by pressing the 2 chevrons/arrows on the rightmost tab (why they are on the tab itself is not clear). The click on these arrows does not move the list left and right but rather opens a drop down list of remaining tabs (improving somehow the spatial memory). It also shows the list of all opened tabs by clicking on the icon in the TaskBar.

Opera: is my second favorite and if it wouldn't be for vertical tabs extension in Firefox this would be my choice. All opened tabs are visible at once (as with Chrome) and it is possible to group them (as with Firefox Tree Style Tabs or Tab Groups). Although the grouping somehow hinder visibility and reminding capabilities. Even if more tabs are opened the favicons remain visible (see next screenshot).

Opera with 30 tabs opened still preserves some visibility and reminding capabilities.

Although my screen estate is significantly smaller than the one on my 15.4 inches laptop, I still prefer vertical tabs. The reminding, visibility and navigation are still superior than with horizontal tabs and this outweighs some horizontal navigation on some web pages.

Widows 8, Windows Explorer annoyances and Miller Columns

nospam@example.com (Matjaž Kljun) — Mon, 13 May 2013 13:23:00 +0200

For the past month I'm stuck with Windows 8 as my MacBook pro had a common GPU problem which is being fixed at the moment (BTW I'm not an Apple fanboy and for the cost of their computers they should be way more reliable).

After a long time not using Windows (last time XP and then various flavours of Linux, BSD and OS X) I have found some annoyances with this particular 8th version. But the worst (being a PIM researcher) of them is Windows Explorer.

1. When navigating folders on the File Pane (right side), the tree in Navigation Pane (left side) is not expanding. So 8 levels down the hierarchy on a File Pane I realise that the tree is still closed and moving files between File and Navigation Pane is not possible until I move 8 levels down the hierarchy on both sides?!? I remember the expansion being default in Windows XP. I learnt so far that the current (non-expanding) behaviour became default in Windows 7 and is persistent in Windows 8. Who thought that this would be a good design? To make things just a bit worse they changed the way to turn automatic expansion on :(. (Windows 7 or Windows 8 solutions).

2. What are the Libraries for? It's a rhetorical question. But I have all videos in separate folders (e.g. movies, cartoons, personal videos, etc.) and I don't need the OS to accumulate them together. I put them in separate folders for a reason. The same with photos. So I'd love to remove Libraries from the Navigation Pane. Right mouse click in Navigation Pane and deselect "Show all folders"?!? What?!? What does this string has to do with Libraries?

And to answer my rhetorical question:

"In 7 it is intended that you use your Libraries to handle data, and leave the data management to the system"

Wait, what? I DON'T WANT THE SYSTEM TO HANDLE MY FILES! This is what all user studies suggest SINCE 1980! And nothing has changed in 2013 as far I as I read scientific papers :(.

3. Missing status bar. In XP the status bar showed the remaining space on the currently browsed hard drive or how big are selected files, how many of them are in the current folders, etc. I know this was not shown by default but View->Toolbars->Status bar (or something similar) was not hard to select. Now it's gone ... the reason:

"... removed due to a user anxiety problem, usually caused by reserved space allocations for the Virtual Memory or TEMP set asides ..."

What, what, WHAT?

To clarify. I understand that less technically savvy users might embrace these features (I checked with my sisters and parents and they are not using the Libraries .. don't even know what they are and what's their use). But disabling features for Power users?!?! I simply don't get it.

I'm also aware that there are alternative file browsers but I have to admit: I miss Finder and its Miller Columns which I personally find way more useful than trees.

The only two Windows file browsers with Miller Columns (or multi-columns if you like) I found are:

UltraExplorer which sadly is not developed for the past 3 years and its multi column interface is very buggy (to name one, after deleting files the current column is not auto-updated and it crashes at least once a day)
WinBrowser which isn't cheap for a file browser but at least it's being developed.

I find it hard to believe that there aren't more alternatives.

Well .. every current OS has some annoyances and every new version of each of them will annoy some users. I suppose that's life ....

EDIT 15. 5. 2013: WinBrowser is buggy :/. Crashes at least once a day. So no real Muller Columns alternative for Windows.

Kile editor (KDE) menu items keep changing order

nospam@example.com (Matjaž Kljun) — Mon, 06 May 2013 14:34:00 +0200

First of al I don't have a solution (I just happened to work on this Ubuntu 12.04 box). I found it amusing that every time I opened Kile the order of menu items was different.

In the photo below the order of items is View, Edit, File ... :).

Everyone knows that changing positions on the menu items kills the familiarity with the system ... but maybe an element of randomness makes it more fun (at first at least).

Which way does this door open 2?

nospam@example.com (Matjaž Kljun) — Mon, 29 Apr 2013 14:11:00 +0200

I already posted one bad and one good example of door handles. Here is another good one.

On this side the door needs to be pushed:

On this side the door has to be pulled:

The role of the second monitor - post-it notes board

nospam@example.com (Matjaž Kljun) — Mon, 22 Apr 2013 14:05:00 +0200

Usually the second monitor is used for extending the desktop's real estate. Not in this example. In this office the extra monitor is used for post it notes.

The reason: if email is on the extra monitor, then less work gets done as the user keeps an eye on the arrived mail all the time. So more work gets done with the monitor turned off. And as the monitor is already there, the user uses it for post-it notes.

How to write non-English letters in my name

nospam@example.com (Matjaž Kljun) — Mon, 15 Apr 2013 15:26:00 +0200

Well .. apparently there are many ways. My name is written like this

Matjaž Kljun

But when the keyboard lacks special letters you can always compensate with other non English letters like my colleagues do

Mątjăz Kljún

Or like this

Mätjåz Kljũn

I suppose both are still better than Nat Jazz :)

Taps 24: separated push tap

nospam@example.com (Matjaž Kljun) — Mon, 08 Apr 2013 14:54:00 +0200

This one was interesting to operate. Buttons need to be pressed and held down for water to flow. When one button is pushed in (e.g. right cold) only one hand can be washed. It is impossible to hold both buttons down and wash hands :). Mixing water is also not possible without plugging the sink (the plug is not there).

Showcase of a store with a price for the missing item

nospam@example.com (Matjaž Kljun) — Mon, 01 Apr 2013 14:46:00 +0200

I suppose not the April fools day. Made me laugh nonetheless ... the first item on the list is a hat for 7€.

A smile with a pancake

nospam@example.com (Matjaž Kljun) — Mon, 25 Mar 2013 14:51:00 +0100

Very similar to this one :)

Taps 23: Tap with pedals

nospam@example.com (Matjaž Kljun) — Mon, 11 Mar 2013 14:39:00 +0100

At first I was puzzled as I was searching for sensors. Then I realised that this tap is operated by pedals on the floor. Hygienically very good. Selecting a desired temperature a more complex task :). I like it.

AngularJS: show progress of a form by counting the number of disabled fields

nospam@example.com (Matjaž Kljun) — Mon, 04 Mar 2013 09:54:00 +0100

Let say we have a survey with many questions. Some questions are enabled and some disabled at first and this keeps changing based on what is selected or entered. At any given time we want to know the count of all fields in a form, how many of them are disabled and how many still required. The number of all and required fields is easy as AngularJS keeps an array of all form elements. Disabled elements are something else.

Counting disabled fields can be a challenge if many radio buttons are used, as every radio button is counted as one element.

Lets take this code for example:

 <!doctype html>
 <html>
    <head>    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    </head>
    <body>
    
    <form>
     <input type="radio" name="typeComputer2" disabled> 1<br>
     <input type="radio" name="typeComputer2" disabled> 2<br>
     <input type="radio" name="typeComputer2" disabled> 3<br>
    </form>           
    <div id="res"></div>

    <script>
      var bla = $(':disabled').length;
      $('#res').text("Number of disabled elements: " + bla);
    </script>
    </body>
 </html>

Will produce this:

The number of disabled elements is 3. But in fact this is the same group of radio buttons and could be counted as one element (only one radio button can be selected at once).

Lets look at the solution using AngularJS.

We have this HTML document with 3 form elements.

First one is 3 radio buttons that are disabled and not required until the checkbox is selected
Second is a required radio button
Third is a required input field

<html ng-app>
  <head>
     <script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
     <script src="controller.js"></script>
  </head>
  <body>           
    <div ng-controller="ctrlRead">

      <form name="survey">
        <input type="radio" name="n1" value="1" ng-model="s.el1" 
                        ng-required="s.el2" ng-disabled="!s.el2"> 1<br>
        <input type="radio" name="n1" value="2" ng-model="s.el1" 
                        ng-required="s.el2" ng-disabled="!s.el2"> 2<br>
        <input type="radio" name="n1" value="3" ng-model="s.el1" 
                        ng-required="s.el2" ng-disabled="!s.el2"> 3<br><br>

        <input type="checkbox" name="n2" ng-model="s.el2" ng-required="true"> a<br><br>

        <input type="text" name="n3" ng-model="s.el3" ng-required="true">
      </form>           

      <div id="res"> 
        Disabled: {{eDisabled}} <br>
        All: {{eAll}}  <br>
        Required: {{eRequired}} <br>
        Done in %: {{eDonePercent}} <br>
        Valid: {{survey.$valid}}
      </div>

    </div>
  </body>
</html>

Now we need to write our controller.js

function ctrlRead($scope, $timeout) {

  //a variable to store our survey data
  var s = {}; 
  $scope.s = s;

  //watch for the sur variable to change
  $scope.$watch("s", function () {
     //timeout to fire events 100ms later 
     //for DOM to register the changes
     $timeout($scope.countPercentageDone, 100);
  }, true);

  $scope.countPercentageDone = function() {      
    var requiredTrue=0;
    var requiredFalse=0;
    var disabledElementNames = new Array();    
 
    if ($scope.survey) { 
      //this traverses the form elements stored in form name
      $.each($scope.survey, function(index, value) {
        //survey holds other elements ... 
        //only form elements have $error object
        if ($scope.survey[index].$error) { 
          if ($scope.survey[index].$error.required == true) {
            requiredTrue++;
          } else {
            requiredFalse++;
            //check if the form element is disabled
            if ($("[name="+$scope.survey[index].$name+"]:disabled")) {
              //if it is and it is not just element filled in 
              //element also become disabled once filled in!!
              if ($("[name="+$scope.survey[index].$name+"]:disabled").length != 0) { 
                disabledElementNames.push($scope.survey[index].$name);
              }
            }
          }
        }
      });
    }

    $scope.eDisabled = disabledElementNames.length;
    $scope.eAll = requiredTrue+requiredFalse;
    $scope.eRequired = requiredTrue;
    $scope.eDonePercent = 100-((requiredTrue*100)/(requiredTrue+requiredFalse-disabledElementNames.length));
  }

};

To summarise the code:

We traverse all form elements in the $scope.survey array.
Because this array contains other elements as well as form elements, we have to look only at those that have an $error object defined.
In all elements that are not required we look for those that have lenght > 0.
We do this because elements that we fill in also become disabled by AngularJS.

This example is also available in jsfiddle.

For the progress bar we could use bootstrap:

  
  <div class="progress">
     <div class="bar" style="width: {{eDonePercent}}%"></div>
  </div>

or any of the solutions I wrote about here to support older browsers.

A big thanks to Tine for all the suggestions and help.

Taps 22: a push tap with nice design for temperature control

nospam@example.com (Matjaž Kljun) — Mon, 25 Feb 2013 14:26:00 +0100

This tap operates by turning the top knob left or right to select the desired temperature and pushing it to start the water flow. The temperature indicator is very nice as it shows the amount of cold and warm water.

Taps 21: A tap with a sensor and a manual

nospam@example.com (Matjaž Kljun) — Mon, 18 Feb 2013 14:18:00 +0100

A (sensor) tap with a manual is never a good sign. The tap itself is nicely designed.

Bootstrap progress bar in 100 images for older browsers

nospam@example.com (Matjaž Kljun) — Mon, 11 Feb 2013 06:33:00 +0100

These are assumptions taken here:

Bootstrap progress bars are nice
They do not work in IE 6-9 (I really wonder why 24% of web users don't upgrade their browsers):
"Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox."
I needed a progress bar for a web form that would work in all browsers
I'm calculating how much of a web form is completed with AngularJS and change the progress bar on he fly.

Let's start.

1. Create 100 progress bars using a php loop and a Bootstrap progress bar code:

 <!doctype html>
 <html>
    <head>    
        <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
        <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div id="progress_bar" style="width: 500px; margin: 10px auto 0 auto">
            <?php
            for ($i=0; $i<101; $i++) { 
                echo '  <div class="progress" style="margin: 2px">
                            <div class="bar" style="width: '.$i.'%"></div>
                        </div>';
            }                    
            ?>
        </div>
    </body>
 </html>

It is possible to use other colours and stripes, etc ... but I'll use simplest progress bar. Keep in mind that my outer div is 500px wide as this is the size of a progress bar I wanted.

2. Crop the progress bars from a web page produces by the above code

The simplest way is to use Awesome screenshot extension for Chrome, Safari or Firefox. It is also good to cut down the image size with e.g. re-saving it for the web so it would be smaller in size (not resolution).

I ended up with this image (original size can be downloaded here):

This can be already the end of the story. The only thing wee need is to use this image as a background of a div and slide up or down based on the percentage we want to show.

3. Show the progress bar

3.1 Using CSS background-position and AngularJS binding

 <div style="float: left;">Progress: </div>
 <div style="width: 500px; height: 22px; float: left;
                  background-image:url('progressbar_small.png'); 
                  background-position:0px -{{Math.round(22*(percentage))}}px;">
 </div>

Each progress bar is 22px high and I multiply it with the percentage I calculate based on how much of the form is filled in. I also use the Math JS in binding for multiplication (maybe there's a better way but I'm not aware of any). To do this I had to define the Math object in my $scope this way $scope.Math = window.Math;

For some reason the above did not work in IE 8 (which I really care about). Although it apparently works on some web sites. So i decided to slice up the above image in 100 images.

3.2 Using individual images

This is not the optimum solution as for every change there is an Ajax get call to retrieve a desired image. We did this only once in the above example.

This procedure was also explained in a previous post.

First I sliced up the image with ImageMagick using a crop flag (the second command should be in one line) using a bash one line script:

 mk@here/$ ls
 progressbar_small.png

 mk@here/$ for((i=0; i<101; i++)) ; do n=$[i*22]; \ 
          convert progressbar_small.png -crop 500x22+0+$n +repage progressbar${i}.png; \
          done

 mk@here/$ ls
 progressbar0.png    progressbar32.png  progressbar56.png  progressbar7.png
 ...
 progressbar2.png    progressbar53.png  progressbar77.png  progressbar_small.png

The -crop flag slices up images 500px wide and 22px high and starts at 0px on the X axis and goes down 22*i where i runs from 0 to 100. The end results are 100 images.

And finally the HTML bit:

 <div style="float: left;">Progress: </div>
 <div style="width: 500px; height: 22px; float: left;">
     <img src=progressbar{{Math.round(22*(percentage))}}.png">
 </div>

All images are available in this zip file.

I hope this can help someone.

Any other suggestions greatly appreciated.

A big thank you to Tine for all the suggestions and help.

Slice up an image in equal slices with ImageMagick or a progress bar in 100 images

nospam@example.com (Matjaž Kljun) — Mon, 04 Feb 2013 07:38:00 +0100

Let's assume we need a progress bar in 101 images where each shows a particular percentage form 0 to 100. How to create such image will be explained in the next post (not ready yet at the time of writing). I already prepared the image here.

The easiest way to slice up an image is in a command line using ImageMagick's a crop flag. The first command shows the image file we are going to slice. The second command (which should be in one line) is a simple a bash for loop and in each iteration we create a new slice. The third command just lists files that we created.

 mk@here/$ ls
 progressbar_small.png

 mk@here/$ for((i=0; i<101; i++)) ; do n=$[i*22]; \ 
           convert progressbar_small.png -crop 500x22+0+$n +repage progressbar${i}.png; \
           done

 mk@here/$ ls
 progressbar0.png    progressbar32.png  progressbar56.png  progressbar7.png
 ...
 progressbar2.png    progressbar53.png  progressbar77.png  progressbar_small.png

The -crop flag slices up images 500px wide and 22px high and starts at 0px on the X axis and goes down 22*i where i runs from 0 to 100. The end results are 100 images.

All images are available in this zip file.