Persistent Inappeasable Mind - Software Interfaces

When designing for web, check the page at different resolutions

nospam@example.com (Matjaž Kljun) — Mon, 17 Jun 2013 14:55:00 +0200

A few last posts were about me using my Windows laptop. To tell the truth I gave it to kids but took it back for two months (they didn't even notice). The laptop I'm talking about is a small 12.1 inch (1024x768 resolution) beast with a TFT display. Since resolution is not its strength, browsing the web often includes horizontal scrolling. To make things worse I prefer vertical tabs and thus making my horizontal screen estate even smaller. Web designers should consider such cases.

An example is a logo of this page on a wide screen:

And the same logo on my 12 inch laptop:

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).

Nonlinear presentations based on open standars HTML5 & CSS3 - a list of tools

nospam@example.com (Matjaž Kljun) — Mon, 24 Dec 2012 16:53:00 +0100

It's been over a year since I wrote a list of non-linear presentations software. I used Sozi then, but things have changed and there's more choice. I now make my presentations in HTML5 and CSS3.

There are several javascript frameworks that can produce HTML presentations (check cool presentations on their websites):

impress.js
reveal.js
dizzy.js
shower
deck.js
DZSlides
jimpress.js (a jQuery enhanced impress.js)

I wont go into details, just open the links and check what they are capable of. Major drawback of these is that you need to know HTML and CSS to create presentations. And if you need printouts, this can be hard to achieve as well. The good thing is that a few editors are available.

dizzy.js comes with an editor
impress.js has two GUI editors:
- Impressionist
- Strut
One markup editor
- Hekyll

Both Impressionist and Strut look very promising for the wider adoption of these type of presentations.

One thing is sure: HTML is plain text and I LOVE plain text. I'm not a fan of proprietary formats which break my files (in general) with every major version release. This is one of the reasons I WRITE (almost) everything in TXT and TEX. With presentations in HTML, my digital life moved even more into the plain text world.

I'd like to thank everyone for producing such a good variety of tools.

Disk usage and hierarchy depth visualisations on OS X

nospam@example.com (Matjaž Kljun) — Tue, 25 Sep 2012 12:49:00 +0200

Just writing something about hierarchy visualisations and found these two useful apps.

GrandPerspective using (cushion) treemaps [1]. Similar Disk Inventory X.

diskring using sunburst, multi-level pie chart or ring(s) chart (not developed any more) [2]. Similar is DaisyDisk.

[1] Van Wijk and Van De Wetering, Cushion treemaps: Visualization of hierarchical information, IEEE Symposium on Information Visualization 1999 (Info Vis' 99) Proceedings, 1999

[2] Stasko, Catrambone, Guzdial and McDonald, An evaluation of space-filling information visualizations for depicting hierarchical structures, International Journal of Human-Computer Studies, Elsevier,2000

Screenshot on the public display = free advertisment

nospam@example.com (Matjaž Kljun) — Mon, 05 Dec 2011 06:35:00 +0100

I had a good laugh seeing a default Windows XP screenshot on a public display. It makes me wonder what's the real purpose of this display :) (located in Liverpool's shopping district). And if MS has anticipated such free advertisement :).

EDIT: photo to no float as it broke the layout of the front page

Ctrl+F not known by 90% of Americans. Blame the interfaces, not users.

nospam@example.com (Matjaž Kljun) — Tue, 15 Nov 2011 06:46:00 +0100

An old news but a new rant.

When looking/searching for information we often look for specific words in text. We search for specific words in texts we find on the internet, in documents, in file names, emails, etc. The point is - searching for information is a part of everyday life. This process helps us complete tasks or satisfy needs.

So is the statement "90% of us don't know CTRL+F" a surprise? Not really! Comments on this news from various sources are far more surprising and sad:

"Americans are stupid" (I think this is a worldwide trend not limited to USA)
"People are dumb and lazy" (not knowing CTRL+F is not a sign of laziness)
"If they would be paid by productivity, they would learn it in a minute" (Disagree :().

I spent some years as the end user support and I have to agree that some users don't know how to use computers and they don't wish to. These users always rely on "support" to complete even the easiest task such as "copy files from a USB thumb drive". In my case, these were mostly (but not always) older users who were caught by computers by surprise and a few years before retiring they don't want to be bothered. But there are the majority of users (of all ages) who use computers, don't rely on support, and still don't know simple keyboard shortcuts!

First we have to take into account that most users are not power users and their usage ends with word processor, email client and nowadays a social network site. All of them use buttons in their word processors (instead of CTRL+X, CTRL+C and CTRL+V). After I realized that they scan tons of emails to find a desired one I put a search box on a toolbar so it became immediately visible and all users started to use it regularly. Why Gmail has a search bar above inbox? To make it visible!!

Keyboard shortcuts are not for everyone. I don't blame users for not knowing them. Users learn how to do something and if they think, that cost of doing it does not exceed benefit, they are satisfied. So if they spend 10 minutes on searching for a specific word in a document by reading it, because they don't know the shortcut, I don't find it surprising. At the end they reached their goal. Such important functions should simply be more visible.

So DON'T BLAME the USERS, BLAME the INTERFACES.

Text editors for OS X - a list I tried so far

nospam@example.com (Matjaž Kljun) — Thu, 10 Nov 2011 06:47:00 +0100

Here's the list I tried (in no particular order) of native OS X editors:

Zend studio: An PHP IDE
TextWrangler: A small brother of BBedit web editor
TextMate: Very capable and nice editor (30 days trial)
Fraise: A Smultron's open source fork (not active anymore); still available and has some bugs
BBedit: Focused on web developing
Bluefish: A nice cross platform open source editor
Smultron: Used to be my editor of choice; I really like sidebar tabs
Kod: I expected a lot from this but the development stopped a while ago (open source)
Coda: Also focusing on web development
Komodo Edit: Another cross platform open source editor (and stripped down version of Komodo IDE)
Sublime Text 2: Also cross platform and very capable
Espresso: Aimed at web developers

I'm not going to explain what I liked and what I did not about these editors, because it's based on my personal preferences. This wouldn't be fare either. All these editors are really packed with features and capable.

If undecided, give them a try.

Continue reading "Text editors for OS X - a list I tried so far"

ImagePlot visualization software: explore patterns in large image collections

nospam@example.com (Matjaž Kljun) — Sun, 25 Sep 2011 06:57:00 +0200

I already explored a few available visualizations for email context in everyday usage. I just discovered another interesting piece of software called

ImagePlot

that visualizes patterns in image collection. Not that it can't be done with other software. But this one is so much photos oriented (based on ImageJ). And it works on all major OSes. The interface is a bit confusing though :(. Download it here.

Nonlinear presentations moving away from PowerPoint

nospam@example.com (Matjaž Kljun) — Mon, 05 Sep 2011 07:15:00 +0200

I had to make a few presentations in the last few months and I desperately wanted to move from MS PowerPoint/LibreOffice Presentations. I tried Keynote two years ago and when upgrading my OS I couldn't find my iWork copy so I ended up with 20 presentations that were useless (vendor locked-in). But Keynote is very similar to PP anyway. I wanted something different. And about a year ago I saw Prezi with it's large plain area on which presentation is placed and then traveled about, zoomed in and out etc. I really like the idea, but everything is done and saved in Flash and as such not really reusable.

I did some research and found a handful of nice solutions for creating nonlinear presentations (I'll list all tools, the above mentioned included):

Prezi - a Flash based zoomable area http://prezi.com/
Ahead - very similar to Prezi and Flash based http://ahead.com/
Sozi - an Inkscape extension that creates Prezi like presentation in SVG http://sozi.baierouge.fr/wiki/Sozi
Dizzy.js - a JavaScript library for creating nonlinear presentation http://dizzy.metafnord.org/
Slidy - although linear by nature, it is using open standards like HTML and CSS http://www.w3.org/Talks/Tools/Slidy2
JessyInk - another Inkscape extention http://code.google.com/p/jessyink/

As said, I did not like the Flash part of the first two. And I really liked that the last four use open formats and can be opened in almost every modern browser (a very bold statement!). I couldn't get Dizzy.js to work in a decent time. JessyInk is still kind of linear, as is Slidy. So I ended up with Sozi. I very much liked to work in Inkscape and creating content was not hard. Then I only needed to define the sequence of how the content will be shown and I was done. Presentations work in my FF :).

Here's an example.

Have fun

History of multitasking

nospam@example.com (Matjaž Kljun) — Tue, 30 Aug 2011 07:31:00 +0200

Multitasking is so obvious today we don't even notice it. Some exceptions, such us iPad, remind us of the days when this was not possible. A few months ago ./ had an article about a Blit Terminal - claimed as a first multitasking GUI. Let's name a few GUIs that supported multitasking in that era and their evolution:

1979 (1980) OS9 (included a GUI on some platforms like Tandy Color Computer)
1981 Xerox Star
1982 Blit Terminal (allowed usage of many applications from the server at once on the terminal)
1983 Apple Lisa
1984 X windows (similar to Bliz it allowed multiple applications to run on the server and showing them on the client terminal)
1984 Apple Machintosh
1984 IBM TopView (multitasking for DOS)
1985 Atari TOS/GEM (kind of multitasking via special accessories)
1985 Amiga
1985 Deskqview multitasking for DOS applications
1985-87 Windows 1.0 (tiled windows) - 2.1 (real multitasking)
1986 (1989 first public release) NextStep (object-oriented, multitasking OS)
1988 OS/2 1.1 (similar to Windows 2.1)

I see this as 3 different development branches: (1) development of standalone multitasking GUIs for personal computers, (2) development of server-terminal GUIs and (3) bringing some "GUI" multitasking functionality to CL interfaces.

None the less, it is impressive what these systems were capable of, given the time and hardware available, while still trying to lower the prices for the masses.

A nicely designed help in web forms

nospam@example.com (Matjaž Kljun) — Mon, 15 Aug 2011 06:53:00 +0200

I needed to extend my TV license and while entering my data in a web for I was greeted by a nice web form and help interface. Yes, it shows up only when the form field is selected and there is no hint that the help is available. It also a bit surprising the first time it pops on the screen. But nonetheless the whole web form design (see left steps) and help frame is easy to understand and visually connected.

Per-site language preferences in browsers please!

nospam@example.com (Matjaž Kljun) — Fri, 05 Aug 2011 06:49:00 +0200

A lot of web sites are translated in many languages. And when we visit them, they usually look up at our web browser's language preferences (locale). However, the content differs between languages and not everything is translated. For example, my home university's web site has a lot of content in Slovenian but only essential information in Italian and English. So I would like my browser to show me the Slovenian version of it. But I want Google in English, because I don't get it in Slovenian. If I set my language preferences to Slovenian, Google gets translated as well; if I set it to English, university's site shows up in English and I have to navigate to the language I like. Google for example, has a preference form when one can select the preferred language. But in my case it keeps changing back to my locale after some time and I have to do it over and over again.

Some web sites look also at user's IP address and show the content accordingly to IP's geographical location. This gets even more annoying than browser's locale. When traveling in Germany I still want my web pages in English as I might not speak German :).

I know this is not a problem to native English speakers and that it is not hard to just select a right language here and there. But it produces a few undesired clicks.

So why not having a per-site language settings besides a global one? I might be the only one just slightly annoyed by this issue! But on the other hand, I never officially complained to the browsers' people :). I have to do that.

Scrollbars - what we lost in technology (de)evolution

nospam@example.com (Matjaž Kljun) — Sun, 10 Jul 2011 06:44:00 +0200

I while ago I wrote about scrollbars and their positions on the right and on the left of the applications windows. I won't go into details whether left/right is wrong/right (more about arguments can be found in the mentioned post). I recently read about what we lost in scrollbars in an article about what we lost in the technology evolution (or as the authors name it de-evolution). An worthy mentioned example are "clicky" keyboards such us IBM Model M.

Bill Cattey argues that today's scrollbars are too simple:

"I'm disappointed in the direction scrollbar behavior has evolved," Cattey laments. "In the early days of user interface toolkits (think back to the X Window system, Sun Open Look and the CMU Andrew Toolkit of the early 1980s), Windows, MacOS, and UNIX Workstation platforms explored many possible aspects to scrollbar action beyond just dragging the bar to move the text."

"The CMU Andrew Toolkit had very complex scrollbars that took a while to master," say Cattey. "Once mastered, they provided two features I miss very much: left-click to bring this line to the top of the window and right-click to bring the top line of the window down to here. I could comfortably read online documents by paragraphs and other logical groupings by positioning the mouse appropriately in the scrollbar and doing a quick left-click or right click. It quickly became a habit that required no thought."

This complex scrollbar behavior "looked like it was becoming accepted," according to Cattey. "I remember being pleasantly surprised to find it available in Emacs built against the Athena Widgets. It was there for a while, but then it was gone. The more popular Mac and Windows platforms evolved very different ideas about whether to offer the ability to support a right mouse button, and what behavior it should have. Scrollbars got simpler. Too simple for my tastes."

"To this day," says Cattey, "Whenever I read an article online, be it in Adobe Reader, a text editor, or a web browser, I try to get an uninterrupted paragraph on the screen, fail, curse, and move on, knowing that online reading used to be a far less turbulent and far more graceful experience before popular and simple displaced complex and useful."

Before there were scrollbars, command-line interfaces to Unix and DOS would paginate output and pause when the screen was full, until you requested the next screenful with the "more" command -- which required being included in the command line, e.g., "grep fnord * | more" ("search for the character string 'fnord' in all files in the current directory, and pipe the output through 'more').

Interesting enough. No mentioning of left/right but worrying about simplification of scrollbars. Some screenshot and scrollbars behaviours can be found in already mentioned post.