Introducing Action Bar

Ci is excited to announce the launch of our new Action Bar as a clearer and more intuitive way to work with the files in your Workspace.

Action Bar for Workspace-Resized.png

ALL NEW Action Bar

We feel the new Action Bar is so intuitive that it should not require an explanation on how to use it. However, if you feel differently, then give us a shout here and let us know what you found difficult or frustrating to help us improve your experience.

If you’re like us, then you use many different online tools to get your work done. It can be hard to remember each product’s unique icons and features, so we want to take that extra load off your brain. We hope this helps you find your next action better than a simple icon, and discover additional features in Ci that could make your day-to-day workflow easier.

One of the big usability improvements we made was adding subtitles under each action icon. During our internal reviews, we debated whether to only show the subtitles for first-time users or make it a user setting. The unanimous feedback was to always show them as everyone felt they improved usability and accessibility for all users.

The Action Bar is a new global interaction pattern that will be displayed whenever you select an item you can act on. The available actions are context-aware and will only display actions applicable to the items you are working on. You can see below how the Action Bar works with various items such as Folders, Files, File Requests, MediaBoxes and WorkSessions.

Action Bar in File Requests view

Action Bar in File Requests view

Action Bar for WorkSessions-Resized.png

Action Bar in WorkSessions view

Action Bar for MediaBoxes-Resized.png

Action Bar in MediaBoxes view

…and it’s a pattern that works for mobile (which deserves its own blog post to inform you of upcoming improvements to better serve our mobile users).

Action Bar in mobile web browser

Action Bar in mobile web browsers

I want to know how the sausage is made!

We’ve been continuously shipping features since Sep 2013, so we sometimes find ourselves outgrowing our original layouts and designs. Our thinking has also evolved along the way as we keep learning new things about our product and our users that lead us to new or better ways to serve better.

The Action Bar was an unplanned discovery as a result of needing to make room in our Context Panel for additional information we plan on displaying in the future. In doing so, we ran into three problems with our existing layout & design:

  1. The Context Panel area was getting crowded.
  2. The Context Panel was mixing purposes — mixing context (is this the right file?) with action (what can I do with this file?).
  3. The Actions were presented inconsistently — placement for some options was horizontal while others were vertical, big and small buttons, and inconsistent interactive states (some lit, some not).

Here is a diagram illustrating the two problems above and our Action Bar solution.

2017-02-24 Context Panel analysis (for Blog) (2).png

No, really. Tell us how we’re doing. 🙂

We hope you like this change and we’re always interested in getting positive (or negative) feedback to help us see our “blind spots”. Go here to give us a piece of your mind.


dan-hitomi-blog-avatarDan Hitomi

Head of Product & Design for Ci and a purveyor of market & customer problems

Dan has developed solutions for major media studios & broadcasters for over 15 years and specialized in building enterprise SaaS solutions for the media industry