Tag Archives: Whiteboard

About Kerika’s Whiteboards and Canvases.

Using animation to help users understand canvases can be attached to cards

We have been cautiously adding animation to the Kerika app — as noted previously — where we think it helps people understand the results of their actions, and why a visual context just changed as a result of something they did.

One such place is when you add a canvas to a card: we added a “blow-up” animation effect to help users understand that they are opening up a new canvas.

To complement this, we added a “collapse” animation when you navigate up from a canvas to the card that contains it, whether you do that by clicking on your browser’s Back button or by using the Kerika breadcrumbs that appear just above the canvas:

Using breadcrumbs to navigate
Using breadcrumbs to navigate

This collapsing animation effect helps reinforce the idea that the canvas you just left was attached to a particular card, and now you are back up a level and viewing all the attachments on that card, including the canvas you were just viewing.

Adding a Google Map to your Kerika canvas

Did you know that you can embed a Google Map in your Kerika Whiteboards? It’s easy: just copy the Google Map’s URL:

Adding a Google Map to Canvas
Adding a Google Map to Canvas

And paste it into the dialog box that appears when you click on the “Add Web Content” button on your canvas toolbar:

Add Web Content
Add Web Content

Kerika automatically figures out the URL refers to a Google Map, and shows you an embedded map on your canvas:

Example of embedded Google Map
Example of embedded Google Map

You can do the same thing with card attachments, for your Task Boards and Scrum Boards: Kerika shows a small thumbnail of the map in the list of attachments on your card:

Example of attached Google Map
Example of attached Google Map

 

UI tweaks: Making it easier to restore Archived Projects

In a long, endless series of UI tweaks that are each small in themselves, but which we hope will collectively add up to a great user experience…

We made it easier for Account Owners to restore archived projects and templates:

Restoring from Archive
Restoring from Archive

This button is shown only to Account Owners, since the power to archive a project or template, or to restore an archived item, is restricted to the Account Owner.

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 🙂

A nice Box hack that’s going away?

For a while now, our Kerika+Box users have had a very nifty feature that allowed them to create a new Box Note from within Kerika itself, and have that note automatically attached to the Task Board or Scrum Board card that they were working on.

Adding new Box Note to card
Adding new Box Note to card

(Which meant, naturally, that this new Box Note was also automatically shared with everyone on that particular board’s project team!)

And since this was a very handy integration with Box, we added it to our Whiteboards and canvases as well:

Adding Box Note to canvas
Adding Box Note to canvas

We added this because Google Docs had equivalent functionality: Google enabled us to create a new Google Doc from within a Kerika+Google board and have that new Google Doc attached to the card the user was working on.

The trouble was, Box’s Content API didn’t really have an official way of doing this, so we came up with a workaround that worked fine for the longest time — so long, in fact, that we forgot that it was even ever implemented as a workaround…

Unfortunately, that broke a few days ago. Box did an update to their platform that stopped our workaround from working any more, which means that, at least for now, we will have to stop offering this feature for our Kerika+Box users.

Hopefully we will be able to get Box to give us official support for this feature, so Kerika+Box remains at least as good as Kerika+Google 🙂

Deleting canvases attached to cards

You can attach as many canvases as you like to cards on Task Boards or Scrum Boards, and if you don’t need them anymore, you can delete the canvases.

Here’s how you add a canvas to a card:

Adding a canvas to a card
Adding a canvas to a card

By default, the new canvas is simply called “Canvas”, but like with any other attachments on a card, you can easily rename it by clicking on the pencil icon that appears to the right when you hover your mouse over it:

Renaming a canvas
Renaming a canvas

Clicking on the “x” button at the far end will let you delete a canvas that you no longer need:

Deleting a canvas
Deleting a canvas

If the canvas is empty — which means that there is nothing visible on the canvas, and nothing in the canvas’ Trash either — you see a simple confirmation message asking if you are sure you want to delete it:

Deleting an empty canvas (confirmation)
Deleting an empty canvas (confirmation)

But, if the canvas is not empty, you see a Restore option instead:

Restoring a deleted canvas
Restoring a deleted canvas

If it seems puzzling why a canvas that appears empty isn’t really empty, make sure you open the canvas and take a look at the Trash: there may be items there that you had previously removed from the canvas:

A canvas that looks empty but isn't
A canvas that looks empty but isn’t

In this example, above, the canvas looks empty but isn’t really: there are items in the Trash.

In situations like this, Kerika is careful to avoid losing all your work: until you empty the Trash on a canvas, the canvas isn’t considered to be truly empty, and until a canvas is truly empty, it cannot be removed from a card.

So, in this example, you see the Restore option rather than the Delete option:

Restoring a deleted canvas
Restoring a deleted canvas

Removing the “Embed as IFRAME” feature for canvases

For a very long time we had a feature which was kind of cool (although we don’t know how many people actually used it!) — you could embed another website on a Kerika canvas, using a technique known as IFRAME.

IFRAMEs were common a few years ago, but have steadily dropped out of favor as browsers have increasingly become more secure.

By running another website inside your own, you can be vulnerable to various cross-scripting errors if you cannot fully trust that third-party website you have embedded.  And, at the same time, people who run websites have become less keen on having their sites embedded into other sites — a practice known as “clickjacking”.

(You can read more about this on Mozilla’s website, if you are interested in the technical details.)

Since it became impossible for us to provide a consistently good experience across all modern browsers, particularly as the number of websites that allow themselves to be IFRAMEd dropped drastically, we decided to drop this feature.  If you were using this feature in the past, you will find your old IFRAME is now just a simple bookmark…