All posts by Kerika

About Kerika

Kerika is the only task management tool that's designed specially for global, remote teams.

Using animation to provide a “sense of place”

Animation often gets a bad reputation, and often this reputation is well deserved because too many designers and developers use animation gratuitously: just because they can, or just because they want to show off their technical skills.

At Kerika we have been very cautious about using animation, and have generally restricted its use to scenarios where it can help give users a “sense of place”: providing transitions from one display to another, so that a user has a sense of having journeyed from one part of the system to another.

Animations are particular useful when returning to where you come from: an effective animation can help users understand that they have returned from their journey.

Using animation to unfold drop-down dialogs helps the user understand that the dialogs are literally unfurling on top of the Task Board or Scrum Board: in other words, the user isn’t going anywhere different, just unfolding another display for temporary use.

With our latest version, we added some more animation: now, when you open a card on your Task Board or Scrum Board, it will appear to literally open in front of your eyes.

Animation is also used when you close a card: it appears to collapse in front of you in a way that draws your eye to its position within a crowded column.

This kind of animation, we believe, is useful rather than gratuitous: it helps the user understand what is happening when she opens or closes a card.

(We may consider some other touches of animation where we think it could help provide useful transitions, but we have to be mindful of the performance hit of animations as well…)

UI tweaks: new icons to allow for a future feature

At the time we added “In Progress” as a new status value, we also removed the “Done” status, mostly because the drop-down list of status choices was becoming rather long — and “Done” was not quite like all the other choices that we were presenting for marking a card’s status.

This is what the old choices looked like:

Old status values
Old status values

And this is what the new status choices look like:

New icons for status settings
New icons for status settings

There are two small UI tweaks here that we made:

  • A purple color is now used for “Needs review” — this previously was green, but green was really the best choice for “In Progress”, and we didn’t want to use the same color for two different states.
  • The icon for “Critical” has been changed to look like a fire: that’s because we want to reuse the old triangle icon in the future for a great new feature that we are still brainstorming — a way to mark certain cards as “troubled”.

UI tweaks: avoiding errors in the right-click menu

Building a great user experience is rarely the result of big, bold actions: more often it is the cumulative gain of a large number of very small tweaks we make to our user interface design.

Here’s an example: the right-click menu, when you click on a card on a Task Board or Scrum Board, used to look like this…

Old right click menu
Old right click menu

This menu is a little crowded, and one irritating source of errors was that people would sometimes click on one of the Move choices (Move to Done, Move to Trash or Move to Backlog) when they intended to do click on one of the others choices instead.

The irritation came from the fact that these Move operations had a much bigger impact than the others: for example, if you accidentally cut a card, you can reverse that operation by selecting the cut cards once more, which would effectively “undo” the cut.

But, if you move a card to Trash or Backlog, it was a lot more hassle to get it back: you had to make sure the Trash or Backlog was currently being displayed — and in many large boards these columns are routinely hidden from view by the user — and then find and drag that card back to where it was.

So, here’s our small UI tweak to reduce the chances of this error:

Right-click menu has new styling
Right-click menu has new styling

A simple visual cue, in the form of grey horizontal separator lines, helps remind the user that some of these right-click mouse operations are “more significant” than others, by creating a visual segregation of these options from others.

A simple UI tweak that helps reduce errors by our users, and one that adds up to a great user experience!

 

Making sure all Project Leaders are equally empowered

On any Kerika Task Board, Scrum Board or Whiteboard, you can have as many Project Leaders as you like.

(Normally, teams prefer to have just a single Project Leader, but sometimes it is helpful and appropriate to designate more than one person as Project Leader; among other things it provides redundancy, so that the single Project Leader doesn’t become a bottleneck for handling requests.)

Just how active a Project Leader is depends upon the dynamics of the team: in some teams the Project Leader is just an administrative role, filled by someone who is like a Team Member in every other respect in terms of how much work she takes on, while in other teams the role may be more formal.

It turned out there was a bug in how Kerika handled notifications and requests when there were several Project Leaders on a single board: these notifications and requests were getting routed to just one Project Leader instead of all of them, so there was still a potential for having a bottleneck.

With our latest release we have fixed that problem: now, all notifications and requests get routed to all Project Leaders, so any of them could act upon it. This should remove the bottleneck!

Redesigning the Whiteboard Toolbar

We did an update to the toolbar shown on Whiteboards (and canvases attached to cards on Task Boards and Scrum Boards), and while that modernized the look of the toolbar — and removed some usability problems with the old design — in retrospect it didn’t do a good enough job of simplifying the interface :-(

Current Canvas Toolbar
Current Canvas Toolbar

The problem with this design was that it mixed together two different functions:

  • Providing drawing function, e.g. drawing a rectangle on the canvas.
  • Providing context-specific functions, e.g. linking an image to an external URL.

To improve this design, we are reverting to a very old style: having the drawing buttons appear on the left side of the Kerika canvas:

New Canvas Toolbar
New Canvas Toolbar

Now, all the functions that put content on the canvas: shapes, lines, files, Web content, etc. are shown on the left edge of the canvas, and the context-specific items — e.g. changing the color of a selected shape on the canvas — are shown on the top.

Using a left-edge toolbar goes back to the very first version of Kerika, although back then we had rather embarrassing styling :-)

Box restores our Box Notes hack :-)

Our last blog post noted that a very useful Box Notes hack had gone away, following an unexpected update to the Box platform a couple of weeks ago.

We asked Box if they could consider adding something to their API that would allow us to restore this functionality, and their response has been very helpful and very fast!

Here’s how fast they responded:

  • July 15, we enter a support request at 6PM.
  • The next morning, Box Support put us in touch with Jon Berger, the Product Manager for Box Notes.
  • The same day, Jon talks to his dev team and commits to providing us with a fix.
  • Less than a week later, the fix is in production!

Very nice.