Tag Archives: Usability

About software usability in general.

Using Kerika, but not using English

Agile & Scrum, Technology, , , , , , ,

Right now, the Kerika user interface is entirely in English, but we have users worldwide and many of them use Kerika with other languages, e.g. Greek, Japanese, Korean, etc.

When you export data from a Task Board or Scrum Board that includes non-English characters, the foreign characters are actually preserved correctly as part of the exported data, but if you need to then import data into some other program, like Microsoft Word or Excel, you need to make sure the other program correctly correctly interprets the text as being in UTF-8 format.

WHY UTF-8?

UTF-8 is a coding standard that can handle all possible characters, so it works with languages like Greek, Japanese, etc. which don’t use the Roman alphabet.

For a long time now, UTF-8 has been the only global standard that works across all languages, because of its inherent flexibility in handling different character sets.

When you do an export of data from a Kerika Task Board or Scrum Board, we create the CSV files in UTF-8 format, and include what’s called the Byte Order Mark (BOM) in the first octect of the exported file.

Including a BOM is the best way to let all kinds of third-party programs know that the file is encoding in UTF-8: it’s a standard way of saying to other programs, “Hey, guys! This text may contain non-English characters.”

And for the most part, including a BOM works just fine with CSV exports from Kerika: Google Spreadsheets interprets that correctly, Microsoft Excel on Windows interprets that correctly, but not…

EXCEL ON MACS

Many version of Excel for Macs, going back to Office 2007 at least, have a bug that doesn’t correctly process the BOM character. Why this bug persisted for so long is a mystery, but there we are…

The effect of this bug is that an exported file from Kerika, containing non-English characters, will not display correctly inside Excel on Mac, although it will display correctly with other Mac programs, like the simple Text Edit.

There’s not much we can do about this bug, unfortunately.

THE TECHNICAL BACKGROUND TO ALL THIS:

BOMs are used signify what’s called the “endianess” of the file.

Endianess is a really ancient concept: in fact, most software developers who learned programming in the last couple of decades have no idea what this is about.  You can learn about endianess from Wikipedia; the short summary is that when 8-bit bytes are combined to make words, e.g. for 32-bit or 64-bit microprocessors, different manufacturers had adopted one of two conventions for organizing these bytes.

For Big-Endian systems the most significant byte was in the smallest address space, for Little-Endian systems the most significant byte was in the largest address space.

(If you have a number like 12345, for example, the “1” is the most significant digit and the “5” is the least significant. In a Big-Endian system this would be stored as “1 2 3 4 5”; in a Little-Endian system it would be stored as “5 4 3 2 1”. So, when you get presented with any number, you really need to know which of the two systems you are using, because the interpretation of the same digits would be wildly different.)

(About a dozen years ago Joel Spolsky, former PM for Excel, wrote a great article on the origins and use of BOM, for those who want to learn more about the technical details.)

Why this affects Kerika at all? Because when you do an export of cards from Kerika, the export job is run on a virtual machine running on Amazon Web Services.

We have no idea what kind of physical hardware is being used by AWS, and we are not supposed to care either: we shouldn’t have to worry about whether we are generating the CSV file using a little- or big-endian machine, and whether the user is going to open that file with a little- or big-endian machine.

That’s the whole point of using UTF-8 and a BOM: to make it possible for files to be more universally shared.

We are dropping the “Embedded View” feature for canvases

Technology, Usability,

We used to have a feature where you could add a URL to a canvas or Whiteboard, and then choose to show that either as a regular bookmark, or as an embedded IFRAME.

We are dropping the embedded IFRAME feature, because most of the time it doesn’t work, and even when it does work, it’s not a great feature to have:

  1. You can only IFRAME a website if that site lets you. And, increasingly, most sites don’t.
  2. IFRAMEing a third-party website on a Kerika page is a potential cause for worry, from a security perspective, because we are letting that third-party website right into the Kerika page.

Lock Canvas: a new feature

Agile & Scrum, Technology, Usability, , , ,

With our latest release we are adding a feature that will make it easier for folks to create, and maintain, very elaborate Whiteboards: any team member can lock a canvas to discourage other team members from making changes.

This isn’t a very complicated function; it has a very simple purpose: if you have been working hard on a particular canvas, which could be a stand-alone Whiteboard, part of a series of nested canvases in a Whiteboard, or attached to a card on a Task Board or Scrum Board, you may become worried that other team members might come by to visit your board and carelessly make changes to your pristine creation.

(After all, we creative types can get really possessive about our beautiful canvases :-)!)

To discourage others from making changes, just click on the lock button that appears to the far end of the Canvas toolbar:

For Team Members, this is a “soft lock”: any canvas that’s locked by one Team Member can be unlocked by any other Team Member, so you are not really shutting out people from making changes, merely discouraging them by signalling that you would like to preserve a canvas in a particular way.

Canvas locked by Team Member
Canvas locked by Team Member

But for Project Leaders, this is a “hard lock”: if a Project Leader locks a canvas, it can be unlocked only by another Project Leader. (Remember: projects can have more than one Project Leader!)

Canvas locked by Project Leader
Canvas locked by Project Leader

So, if a canvas gets to a truly pristine state that you want to preserver forever, have the Project Leader lock it, and the rest of the team will be able to view it but not make changes.

And, of course, if canvases are embedded (nested) inside each other, each canvas can be locked or unlocked, as you like, giving you maximum flexibility.

Switching between open projects

Agile & Scrum, Technology, Usability, , , ,

When you have expanded your view of a Kerika board to fill up the browser, using the “Max View” button on the top-right corner of the Kerika app

Max View button
Max View button

Another button appears on the top-right, to help you quickly switch between all your open project tabs, as well as get to your Home Page:

Switching between tabsThis button is color coded to help you understand, at a glance, what’s going on in all your open projects:

  • If any of your open projects has an overdue card, then the button appears in red.
  • If any of your open projects has updates that you haven’t seen yet, the button appears in orange.
  • If any of your open projects has new cards that you haven’t seen yet, the button appears in blue.

Clicking on the button shows a list of all your open projects, along with your Home Page:

Switching between tabs
Switching between tabs

The little green arrow (shown above at the top) points to the currently open tab, the one that you are viewing right now.

Projects have a blue icon; templates have a purple icon: in the example above, Statewide Tennis Shoe Distribution is a template, while all the others are projects.

  • Boards with unread updates have orange titles, like Health Services above.
  • Boards with overdue cards have red titles, like Release Note Proof of Concept above.
  • Boards with new (unseen) cards have blue titles, like Statewide Tennis Shoe Distribution above.

You can reorganize your list of open tabs by simply dragging them up or down this list.

(But, the Home Page is always on the top; that can’t be moved.)

You can also close an open project tab that you are no longer interested in by clicking on the “X” to the right edge of the entry.

So, there’s a simple visual consistency in Kerika’s design:

  • Blue = New
  • Orange = Changed
  • Red = Overdue

Change Shape: a new feature

Agile & Scrum, Technology, , , , ,

We finally got around to adding a feature to the Canvas that we have wanted for a while, but somehow never got around to building: now, with a single click, you can change a shape on a canvas, whether it is in a Whiteboard project or attached to a card on a Task Board or Scrum Board:

Change Shape
Change Shape

Here’s why you might need this: often when you are first creating a process flow diagram, you might use shapes — rectangles, ellipses, diamonds — in an arbitrary or careless way, which is just fine because at that time you are trying to be creative rather than meticulous.

But, as the canvas takes shape and matures, you might want to go back and standard the use of particular shapes (even if you don’t strictly follow the old conventions for drawing flowcharts, which we don’t either).

This new function makes it easy for you to select a bunch of shapes and change them all to a new shape. Previously, you had to create a new shape and put it in place to replace the old shape, which was pretty inconvenient when you had a bunch of nested canvases and a bunch of curved lines connecting all the shapes.

Easy, now.

A simpler toolbar for Canvases

Technology,

We have updated the toolbar for canvases to provide a better user experience for folks working on standalone Whiteboards or when attaching canvases to cards on Task Boards and Scrum Boards.

What used to look like this:

What Canvas Toolbar used to look like
What Canvas Toolbar used to look like

Now looks look this:

What Canvas Toolbar looks like now
What Canvas Toolbar looks like now

 

  • The Upload File and +Web Content buttons have been replaced with simple icons that take up less space.
  • On the left, there is a new Select All button: this function was kind of buried before, inside the old “Action” button, but now it is more visible and easier to access.
  • There is a new Lock button on the far right: this is a new function that we will talk about more in a separate blog post, but we can summarize it here as a way to freeze canvases to prevent people from making changes.

When a shape, e.g. a rectangle is selected, you used to see something like this:

What the Selected Object toolbar used to look like
What the Selected Object toolbar used to look like

Now, you will see this:

What the Selected Object toolbar button looks like
What the Selected Object toolbar button looks like

 

  • When a shape (or other object is selected, all the other drawing buttons are temporarily hidden, because they can’t be used. (You can’t draw a shape while you have a shape selected.) This makes the toolbar far less cluttered, by not displaying useless buttons.
  • A new button lets you Rename a shape. This is old functionality that you can still access by simply double-clicking on the title of an object, or by using the right-mouse button menu, but this new design makes that function more explicit and easier to access.
  • A new button lets you Change a Shape: this is new functionality. You can change a rectangle to an ellipse, for example, without modifying any other aspect of the shape.
  • A new button makes it easier to change the Appearance of an object: it’s color, fonts, etc. Again, this is old functionality, but made more explicit and easier to understand.
  • New buttons make it clear that you can Copy, Cut and Paste objects. This functionality was buried under the old Action button; now it is more explicit and easier to access.
  • And finally, a simple Move to Trash button makes it clearer how you can delete an object. This removes some confusion that Mac users would experience: on a Mac, deleting is normally done using the Backspace key, but within browsers this would take you back to the previous page because that’s how Macs work.

When you select an image that’s on your canvas, your toolbar used to look like this:

What you used to see when you select an image
What you used to see when you select an image

Now, it looks like this:

What you now see when you select an image
What you now see when you select an image

This is a major improvement: the toolbar is not only less cluttered, but all the functions are more explicit and easier to access and understand, especially:

  • Download file: same function as before, new button. This will let you download any file on your Canvas, from your Box or Google account.
  • Link to website: again, an old function that let you link an image on your canvas to an external website.

DESIGN STANDARDS

For the buttons we are mainly using icons from Google’s Material Design standards because that was already in line with our styling, although in some cases we thought Google’s designs were too “blah” and went for something a little punchier.

BACKSTORY

We haven’t  updated the Canvas features in a while — we had been concentrating on improving the Kanban and Scrum aspects of Kerika — but lately some of our users have been telling us about the amazing collaborative spaces they have built using Kerika (check out the folks working on the Ebola challenge at OpenIDEO) and this inspired us to try to improve the Canvas!

Other very cool users include the folks at the Foundation for Common Good, who are working on a variety of social good projects, and the teachers at the Iowa Mennonite School who have been using Kerika for art projects and other learning activities.

A cleaner look to the Project Info dialog

Usability

We have made a small layout change to the Project Info dialog to make it easier to read: now the summary data on cards and dates are organized in a bullet list instead of being laid out as a sentence:

Cleaner look to Project Info
Cleaner look to Project Info

This isn’t a big deal, of course, so why are we bothering to blog about it?

Well, for one thing it shows our obsession with details, which is probably a good thing — right? And, for another, it highlights the influence of one of our favorite researchers on Web usability: Jakob Nielsen who has consistently emphasized that on the Web people scan text, not actually read.

All hail the master!

Everything is obvious, in retrospect

Kerika, Technology, Usability

We have been working on some designs and ideas for a “Dashboard” feature in Kerika for many months now. Actually, a couple of years now.

Along the way we  convinced ourselves many times that we had solved the problem in an ideal way.

At other times, we convinced ourselves that there was no way to solve a particular aspect of the problem, so our obviously ugly solution was the best possible solution.

Looking back on all these iterations, it’s very humbling to think about how easy it is to think something is perfect, until something better comes along — at which point the old thing is suddenly, unbearably ugly.

In other words, the ugliness of each design is obvious, in retrospect.

So everything we are proud of today: we will be ashamed of in a couple of years…

Free Box accounts don’t support direct downloading of files

Agile & Scrum, Technology, , , ,

When you add files to your Kerika+Box projects, either as attachments to cards on Task Boards or Scrum Boards, or on canvases and Whiteboards, these get stored in your Box account.

If you have a premium (enterprise) version of Box, you can directly download these attachments, instead of having to go through Box’s preview display first: just hover over an attached file, and you will see a “download” button appear:

Directly downloading files from Box
Directly downloading files from Box

This works fine for enterprise users of Box, but if you are using the free version of Box, you will see a Box error page, like this:

Box download error
Box download error