🐪

勤怠管理アプリを改造するChrome拡張を通してUXデザインについて考えたお話

2025/01/17に公開

勤怠管理がめんどくさい!!!!

というのも、某"業界No. 1 クラウド勤怠管理システム"(HPからの引用)内の工数管理機能を操作していた時の出来事です。

まぁとにかくめんどくさいんです。そういう雑な雑務。
この記事ではそういう雑務の改善を通して、UX改善の一端を感じることができたというお話。

ちなみに拡張機能は公開しています。MITです。動作の際に何かあってもわたしは責任は負いませんが、自由に使っていいやつです。

UXってなんだろう

UXとまぁ外国語を仰々しく使っているわけですが、そもそも何なのでしょうか?
UXはUser Experienceの略で、そのまんま"ユーザー体験"を意味しているわけです。体験が伴えばなんにでも言えるわりと都合のいい魔法のコトバ。

このままでは意味が広過ぎて、どの文脈での言葉なのかわからないのでこの記事ではデザインに関する文脈で"ユーザー中心設計"についてを扱います。
読んで字の如く、ユーザーを中心とした設計。ユーザーがやりたいことを自然にできるように、デザインしていこうというお話です。

個人的にそれの際たる例としてはちょっと昔のスマートフォンが挙げられると思っています。
説明書が無くても操作がわかり、特に準備せずに思った通りに見たいコンテンツを体験できることがウリだったわけです。(最近のはちょっと覚えるジェスチャー多くなってきてコレジャナイ感を持ってる)

説明書が無くても操作できるように、ユーザーが次にやりたいことに向けて誘導しているデザインをとっているわけです。
その結果、コンテンツに届くまでユーザーが自然に操作できて、ユーザー体験が向上する。そんなものが"User Experience"なわけですね。

今回改善したいもの

さて、この記事の冒頭の1文をそのまま取ってきましょう。

勤怠管理がめんどくさい!!!!

これは前月全部の日付で工数を修正する必要が生じたときのしんどい体験(Shindoi experience)です。
使っているアプリケーションでは先月の修正が終わって保存ボタンをクリックするとなんと、今月に戻ってしまうわけです。

このめんどくささを説明するために、修正のための操作を図示したのがこちら。

問題なのが、ドロップダウンで12月に切り替えることを修正日の数だけ繰り返す必要があるわけだ。
2回クリックした後、ちょっとロードが入って手を止めなきゃいけないのがすごく嫌。
3、4回ならまぁ我慢するのだけど、月の日付全部で修正入れるとなると流石にめんどくさい。

改善しよう

めんどくさいので、このようなフローに変えてしまおう。ドロップダウンを12月に変えるという全く同じ虚無作業をリファクタしてループの外に出してやりました。

これで毎ループごとのクリック数が2回ずつ減り、さらにロードの待ち時間がループの開始時に集約されたので手を止めなければいけない回数が半分になった。うれしい。

ここまでで改善したいことと改善結果を出したわけですが、わざわざフローチャートにしました。
フローチャートにした意図として、リファクタを可視化するだけでなく、"ユーザー(わたし)がやりたいこと"に誘導する順序を繋げ、ユーザーにアクションを起こさせるようにすべき先である次にやりたいことを明確化できるわけです。やったね。

まとめ

ここまででデザインについてのUser Experienceを語っていたわけですが、まとめとしてはこんな感じ。

  1. デザインに関する文脈でのUser Experienceはユーザーを中心とした設計のことであり、ユーザーが自然に操作できるようにしたものである
  2. 自然に操作させるためにはユーザーの操作を誘導させる必要がある
  3. 誘導させるために最初に必要なのは、誘導させる道しるべを考えること
  4. 道しるべを考えた上で、無駄な操作が起こらないか?誘導順序は妥当か?を考えてみる

この記事では1つのChrome拡張を作成して4からの逆順で思考を伸ばし、完成したモノで格段にわたし自身の操作体験が向上して、ユーザーファーストになった結果を見てこう感じたわけです。
"これがUser experienceということなのだなぁ"

Discussion