Tag Archives: Design

About design, user experience, user interface.

Restyling Preferences

We have restyled your Preferences page, to be more in line with the new design of Kerika that we released a couple of months ago.  It now looks like this:

Board Preferences
Board Preferences

We are using the familiar “card container” style for showing different categories of preferences, like WIP limits, along with the left-side tabs that are similar to those you find on the Home page.

The Boards tab lets you set the following preferences:

  • The privacy of new boards you create: you can make them accessible to anyone with a link; to just people who are part of your Account Team; or to only those people you invite to the board as Board Admins, Team Members or Visitors.
  • Whether to use Work-In-Progress (WIP Limits) on new Task Boards or Scrum Boards that you create.
  • Whether to have your documents converted to the Google Docs format, if you are using Kerika+Google, or whether you want to retain them in their original format e.g. Microsoft Office.  (This preference isn’t shown to Kerika+Box users, or those users who signed up directly.)

 

Notification Preferences
Notification Preferences

In the Notifications tab you can decide how much you want to hear from Kerika when stuff happens (that concerns you).

If you are assigned a card on a Task Board or Scrum Board, and someone does chat on that card, Kerika will always push that to you as an email: we assume that since you are responsible for a card, you need to know sooner rather than later when someone has a comment or question about that work item.

If you are a Board Admin, however, you can decide how many notifications you want when stuff happens on boards that you are responsible for.

For example, you could be notified if someone adds a new card on a board: this usually means that there is new/more work to be done by your team, so you might want to quickly check whether it is important — or whether it is even relevant for that particular board.

And, as a Board Admin, you might want to know whenever someone moves a card to Done.  This is usually a welcome notification: people like to hear that stuff is getting done, but if a team/board gets a lot of stuff done every day these emails can be a nuisance and you might want to turn off this preference.

And, depending upon how involved you want to be with each card and each Team Member, you can get notified whenever a card is reassigned from one person to another.  Some Board Admins like to be very much in control over who is doing what, so if a Team Member takes the initiative to reassign work to another Team Member the Board Admin may want to know right away. Other Board Admins take a more relaxed, hands-off approach and let the team handle its own work allocation.

Finally, you can choose to get a 6AM email summary of everything that is overdue, due this week, and due next week: for all cards assigned to you personally, as well as a all cards on boards where you are one of the Board Admins.  You have the additional option of getting this list summarized by date, or by board — or both.

Canvas Preferences
Canvas Preferences

The Canvas Preferences let you determine how lines, shapes and text look like, by default, when you use Whiteboards.

One useful preference in this tab is to have items snap to grids: this helps you lay out process diagrams more neatly.

 

Tweaking the styling of Tasks inside Cards

We really like the Tasks feature that we introduced recently: this has significantly cut down on the number of cards that we have to track on boards, since many items can be easily captured, assigned and scheduled as tasks rather than independent tasks.

This means we have a better, epic-oriented view of our boards; we don’t get lost in the weeds.

However, the first implementation of the styling could do with some improvement, so that’s what we did:

Improved styling for tasks
Improved styling for tasks

This makes it easier to see the names of people assigned to cards, and the due dates, more easily.

By the way, it took a surprising amount of experimentation before we settled on these colors: in Kerika’s design every color is supposed to have a particular meaning, so that colors appear in a consistent context in every instance.

For example, if we use blue to indicate a clickable link — like we do on the card details left tab, to let you switch between Tasks, Attachments, Chat, etc. — we can’t use blue anywhere else where it wouldn’t be clickable.

So, if blue is clickable in one place, it must always be clickable everywhere else.

This is easy enough, but we also have rules about using colors consistently across actions or displays that seem related, again to minimize the learning effort needed by new users.

Our green is used for Highlights in a consistent way:

What's Assigned to Me
What’s Assigned to Me

The breadcrumbs includes the suffix “What’s Assigned to Me” in green, the Highlights button is green to indicate that it is in use, and a green button is used to indicate that items matching the highlight are out of view.

If we are rigorous about this, there is an internal consistency about the Kerika user experience that makes it easier to learn.  But it takes a lot of discipline.

So if consistency applies a bunch of constraints in our choice of colors, so do legibility and color-blindness: we have to be careful to avoid using color combinations like red and green that are difficult for some people to distinguish.   (About 8 percent of males, and 0.6 percent of females, are red-green color blind in some way or another, whether it is one color, a color combination, or another mutation.)

All of this means that it isn’t easy to pick a new color when we design!

What's Assigned to Me

Highlights, a better alternative to old-fashioned Filters

We have replaced the old Filters feature for our Task Boards and Scrum Boards with a new Highlights feature that we think is better in every way!

Click on the Flashlight icon on the top right corner of the Kerika app:

Highlights button
Highlights button

And you will see this menu of actions:

Highlight options
Highlight options

The default is No highlights. We have a couple of built-in highlights that we know you will find useful right away:

  • What’s assigned to me: very useful if you are working on a large board, or with a large team, and you focus on just what you need to get done.
  • What needs attention: this highlights all the cards on the board that we think need to pay attention too — items that are overdue, on hold, or flagged as needing review.

Here’s how the Highlights work:

What's Assigned to Me
What’s Assigned to Me

A shadow effect helps spotlight all the cards that match the highlight, making them literally pop out of the screen!

If you are working on a board with a lot of columns, there’s always a chance that something that is being highlighted is currently out of view — if, for example, it is near the bottom of a long column.

Kerika takes care of that as well: if a card that matches your highlight choice is currently out of view, a green button appears at the top or bottom, as needed, of each column to indicate that there are cards out of view that match your highlight.

Matched cards are below the scroll
When matched cards are below the scroll

The green arrow acts as more than just an indication that you need to scroll: it is also a button that will scroll the column to show you the next card that you need to see.

(Pretty cool, huh?)

We will be adding more smart highlights in the coming weeks, but in the meantime you can also create your own custom highlights:

Custom Highlights
Custom Highlights

A Custom Highlight can include any combination of people assigned to cards, status, due dates and tags.

For the due dates, we have offered several smart options that are a lot easier to use than standard date pickers:

Smart choices for Due Dates
Smart choices for Due Dates

These ways of specifying due dates — like “Due Next Week” or “Next Month” — make it even easier to set up a custom highlight.

Enjoy.

A transition to “lazy loading”

With our big UI redesign, launched a couple of weeks ago, we have started using lazy loading of cards in an effort to improve performance, particularly with very large boards.

Background:

Most Kerika boards tend to be small, or moderate: up to 100-200 cards in size.  A few users, however, have very large boards: several thousand cards in size!

And this is not because we have users who are tracking thousands of work items simultaneously; it’s just that some users have been continuously using the same board for years to track all their work.

For people who use the same board over several years, the number of items in the Done or Trash columns can eventually number in the thousands.  Displaying such large boards was already difficult in our old architecture: we had underestimated how many cards some boards might contain, so our old design downloaded all the cards on a board every time it was opened, and then created a DOM for each card!

This meant that, for very large boards, the browser had to create thousands of DOMs before it could even display the board.  This was obviously not a sustainable model.

What we did:

With our redesign, we have laid the groundwork for a better architecture using two related concepts in lazy loading:

  • For columns that we anticipate being very large — the Done, Trash and Backlog columns for Task Boards and Scrum Boards — the browser now fetches only a small number of cards, say 10-20, from the server.  (With our old design the browser would fetch every card, for every column.)
  • Fetching fewer cards means the amount of traffic between the browser and the server decreased dramatically, but it didn’t solve the performance problem by itself. We also changed our browser code to reuse DOMs instead of creating new DOMs.  By reducing the total number of DOMs created and maintained within the browser by the Kerika app, we are able to reduce Kerika’s overall browser footprint while significantly improving performance.

Here’s an example of lazy loading of the Done column:

Lazy loading of Done column
Lazy loading of Done column

On this board, the Done column contains 163 cards, but when the board is opened only 10 are shown.  Since these are the 10 most recently done cards, this works great for most users, most of the time.

If the user really wanted to see something that was done a long time ago, they can simply scroll down the Done column, as they would have with our old design as well.

As a user scrolls down, more cards are fetched automatically from the server.  Slightly more cards are fetched from the server than are likely to be displayed, e.g. the browser may fetch 15 cards from the server even when it expects to display only 10.

This helps avoid the perception of delay when the browser needs to fetch more cards, since it will already have 5 more cards stored in memory to show as the user begins scrolling, giving it time to fetch another 15 before the user has finished scrolling.

We also decided to use lazy loading on the Home page: with our new design we display more information about the state of each board than we did previously, and the cards themselves are much larger than before.  This means we are unlikely to show the full set of boards to any user at any time, so lazy loading is a natural choice for this view.

Lazy loading of Home
Lazy loading of Home

Finally, with our most recent update (launched two days ago), we have extended our use of lazy loading to include the Not Scheduled column in the Planning Views, where you can pivot your view of a Task Board or Scrum Board to see all the cards organized in terms of due dates.

Here’s an example of a board where there are a very large number of unscheduled cards:

Lazy loading of Not Scheduled
Lazy loading of Not Scheduled

The Not Scheduled column only fetches and displays 10 cards at a time even though there are over 200 cards that are not scheduled.  Since the browser (on this laptop) can only show 3-4 cards at a time, there isn’t any point in fetching all 200 cards: just fetching and displaying 10-15 at a time does the trick!

Attaching content to the board itself, not just to cards

We have added a new feature that should prove handy for a lot of folks: you can now add content — files from your laptop, images from your mobile or tablet, Web links from your Intranet or the Internet, or canvases — to a Task Board or Scrum Board itself.

If this sounds like something that was always there, maybe we need to say that differently: you used to have the ability to add content to a card, now you can add it to the board itself.

There are many situations we have encountered where we want to share content or a canvas with a team, but there wasn’t any obvious place to still it — no single card on the board that seemed like the right place to attach that content.

And that’s because the content we wanted to add was applicable across the entire board, not just relevant to a single card.

This was getting frustrating, so we decided to scratch our itch: a new button on the top-right area of your Kerika app will let you add files, Web links and canvases to the board itself:

Board Attachments
Board Attachments

This should make some of you as happy as it has made us!

Using Filters with your Task Boards and Scrum Boards

A new tutorial video that shows you how Kerika’s powerful Filter feature lets you customize your view of any Task Board or Scrum Board: just see those cards that are assigned to you, or create more custom views of a board by selecting cards based upon their status, tags, or the people assigned to work on them.

You can even hide entire columns on the board if you like 🙂

 

How Project Settings Work in Kerika (A Preview of Coming Attractions)

Here’s a teaser video of the new Kerika user interface, which we are getting close to releasing…

Among other things, we will consolidate and improve a bunch of project management features under a new “Project Settings” button.

Check it out:

A new tutorial video on how Notifications work in Kerika

We have created a new tutorial video on how Notifications work in Kerika.  It is based upon our new user interface, which hasn’t been released yet, so some of the menu options shown on the top-right of Kerika boards will look a little unfamiliar 🙂