Page thumb fbefb098 9389 44a9 a3d9 9c17483bf567

密かに変わったTorioのUI。お分かりいただけただろうか…?


こんにちは!PRチームの渡辺です。

ここ最近で実はひっそりと変わっていた、プロジェクト管理ツールTorioのUI。
みなさん、お気づきでしょうか?

機能面もさることながら、UIについてもありがたいことにたくさんのご意見をいただきまして、
どんなユーザーさんでも操作しやすいように、少し変更いたしました。

今回は地味だけど結構嬉しい、UIのアップデートについてご紹介します!

 

  1. そもそもUIとは?
  2. 細部にまで神が宿るGoogleのUI
  3. 真似してみました。そう、Torioでね!
  4. まとめ

 

そもそもUIとは?

 

 

UIとは、ユーザーインターフェース(User Interface)の略語で、
「ユーザーの目に触れる部分、ユーザーが使用する部分」を指しています。

Webページだと、閲覧できるページのデザインやフォント、
ボタンの配色や位置、導線など色々ひっくるめて「UI」
ということですね。

Torioで言うならば、みなさんが操作しているタスクページ、左メニュー、
ダッシュボードなど、目に見えるTorio内のあらゆる部分がUIです。

 

UXとはどう違う?

 

同じ文脈で語られることの多いUXは、ユーザーエクスペリエンス(User Experience)の略で、
「ユーザーが製品・サービスを通じて得られる体験」を指しています。
UXは「導線が分かりやすい」などのUIの要素を含みつつ、
「問い合わせへの返答が早くて助かった」
「シンプルなのでどんな職種の人でも使いやすい」など、
もっと広い意味での「ユーザー体験」
を意味しています。

UIの改善は、ユーザーに
「サービスを通じて、こう感じてもらいたい、こんな価値を提供したい」
というUXを実現するための一つの手段
なんですね。

 

 

細部にまで神が宿るGoogleのUI

 

みなさんがお使いのブラウザはChromeでしょうか?
9月のアップデートでは、大幅にデザインが変わりましたよね。
賛否両論あるようですが、私は割と好きな方です。
(ちなみにアスニカはChrome率100%、ブラウザテストのためにFirefox少々、という感じです。)

GoogleのUIの詳しい解説は、他に素晴らしいサイトがたくさんあるので割愛させていただきますが、
そんな新デザインの中でも、特に地味に良いな~と思っているのが、
ブックマークバーにカーソルを合わせた時のUIです。

こんな感じで、マウスオーバーしたボタンの下に、じわっとグレーの影が出るんですね。
(前からこうでしたっけ?)

「ここ、押せますよ~」
「今このボタンの上に、あなたのカーソルがいますよ~」

と言うことを、さらっと教えてくれる親切設計。
意識しないと気づかないけど、実はすごく操作しやすくなっている、そんな心遣いがさすがです。

 

 

真似してみました。そう、Torioでね!

シンプルなプロジェクト管理ツールとしての味を残しながら、Googleの細やかな心遣いを取り入れるべく、
下記の5箇所のUIが変わりました!

 

クリックできるボタンにマウスオーバーすると、グレーで強調される

まんまGoogleのパ○リ、いえリスペクトですが…

例えば、タスクページの「タスクを追加する」ボタンや、「…」など、
「ここ押せそうだな?」というところにマウスオーバーすると、
じわっとグレーの地色が出るように
なりました。
もともとグレーの部分は、グレーが濃くなります。

↓こんな感じですね。分かりやすい!

 

 

左メニューのカテゴリにアイコンがつき、視覚的に分かりやすく

左メニューにある「ダッシュボード」「プロジェクト」「ブックマーク」などのカテゴリーは、
これまではただ文字が表示されているだけでした。
より視認性を高めるために、アイコンを付けて、パッと見て意味が分かるように変更しました。

 

 

プロジェクトの「新規作成ボタン」を探さなくて済む

嫌でも目に入るようになった、黄色の十字ボタン。
そう、プロジェクトの「新規作成ボタン」です。
これまではもっとシンプルで目立たない形状だったのですが…
プロジェクト管理ツールですから、「プロジェクトを作ってなんぼ」という基本に立ち返り、
存在に気づいてもらえるように、あえて主張していく形になりました。

 

 

左メニューを折りたたんで、ワークスペースが広がるように

検索バーの左にある→←ボタンで、左メニューの開閉ができるようになりました。
必要に応じて左メニューを閉じることで、ワークスペースを広く使うことができます。
特にカンバン方式でタスク管理する場合、横にリストが並んでいくので、
この開閉ボタンを使うと全体を見やすくなります!

 

 

ワンクリックでタスクやノートを作成できる

タスク、ノート、ファイル、フォルダの作成をワンクリックで行えるように、アイコンボタンを配置しました。
これにより、実はプロジェクト名のあたりが少しスッキリしたのです。
(多分相当なTorioマニアしか気づいていない…)

 

 

まとめ

 

Torioは、どんな職種の人でも使いやすく、日常に馴染むプロジェクト管理ツールを目指して開発を行なっています。
そのため機能だけでなく、UIも引き続き随時アップデートを行っていきます!

「ここはこうしたら、もっといいんじゃない?」という辛口なご意見、お待ちしております!

 

記事一覧へ