運用担当（主に Windows で作業する方々）から頂いた指摘

始めに

これは、私が実際に業務で体験した、UIへの指摘事項の話です。

私は数年間、社内ポータルの開発に携わってきました。
これまで学んできた UI のお作法に則って開発をしてきましたが、
まさか、そこに様々な指摘事項を貰うことになるとは
思いもよりませんでした。

今回はそのうち、運用担当の方、
特に Windows をよく使う方々から頂いたお便り（指摘）を紹介します。

※個人情報、および業務上の情報は伏せています

他の指摘事項（運用担当者からの指摘など）には以下ページから移動できます。
- 本当にあったUIの指摘事項（メインページ）

Windows のような選択操作がしたい

最初の状態

あるデータをリスト形式で複数行表示するUIを作成した。
当初の要望として、複数行選択して削除やダウンロードをしたい、
という意見があったので、チェックボックスで選択可能にした。

指摘

運用担当Aさんよりご指摘を頂いた。
削除したいデータが何件もある場合、
チェックボックスを何度も押すのが面倒、というもの。
試しにやってみると確かにめんどくさい。

Aさん曰く、Windows みたいに
Ctrl とか Shift を押して複数選べないの？とのこと。
その発想は無かった；

対応

チェックボックスを廃止し、
Ctrl と Shift で Windows の様に複数行選択できるようにした。

具体的には以下のような対応をした。

Ctrl を押している状態だと、前の選択行を維持しつつ、新たにクリックした行も選択状態（行の色を反転）になる
Shift を押している状態だと、前回クリックした行と、次にクリックした行の間にある全ての行が選択状態になる。

※Google Drive が近い

反響

Aさんより、直感的で使いやすい、との回答を頂いた。
なお、Aさんは元々運用経験の浅い方だったので、
Windows のフォルダ操作の方が自然だったのだろう。

教訓

Windows と同じようにして欲しい、という意見は結構多い。
全てを聞き入れる必要はないだろうが、
その画面を操作する人の経験に応じた対応を入れる、という観点も必要だと思った。

コピペはトリプルクリックで

最初の状態

障害調査用の検索画面を作成した。
検索結果をコピーして使う事があるそうなので、
CSV 形式でダウンロードできるようにした。

指摘

運用担当Bさんよりご意見を頂いた。
検索結果を画面上でトリプルクリックで一括選択したい、というもの。

CSV ダウンロードではダメ？と尋ねると、
ちょっとした項目をコピーするのに
いちいちローカルにファイルを落とすのは面倒、とのこと。

それならマウスで選択してコピーすれば・・・
と言おうとしたが、それを言うと負けになる気がしたので考えることにした。

没提案

よくある "クリップボードにコピー" ボタンを設けてはどうか？

回答

コピーボタンは直感的じゃない。
どうしてもクリックでコピーしたくなる、との反対意見。
また、テーブル形式で横に長い検索結果が表示されるので、
ボタンを配置すると、横に長くなって余計見づらくなる、とのご指摘。

対応

よくコピーされる項目だけ、トリプルクリックで全行コピーできるようにした。
リストがテーブル形式の場合、文字列の最後に空白が入ることもあるので、trim もしておいた。
※trim：文頭、文末などの余分な空白や改行を除去する作業

反響

Bさんより、クリックでコピーできる方がやはり楽だね、というご意見を頂いた。
私はマウスをあまり使わないので（キーボード派なので）気付けなかった。

教訓

クリックでコピーしたい、という要望は未だに根強い。
また、ダウンロードやコピーボタンがあれば十分だろう、という思い込みも正解とは限らない、
UIの操作は作業者の目線になって操作、作成してみることが大事。

入力欄が小さすぎる

最初の状態

検索用の入力欄を作成した。
メールアドレスなどが入る項目で、画面のレイアウトを揃えるため、
大きさは漢字8文字程度のサイズにした。

指摘

運用担当Cさんよりご指摘を頂いた。
検索時に長いメールアドレスを入力することがあるが、
入力欄が狭すぎて何を貼りつけたのか（入力したのか）分からない、とのこと。

話によると、
運用作業では検索文字を入力欄にコピペしており、
検索実行前に ちゃんと入力できているか目視で確認 している。
なので、入力項目欄が小さいと、確認するのがとても面倒とのこと。

対応

入力した文字列のサイズに応じて、
入力欄が自動的に拡大・縮小するようにした。
コピペで入力した際も同様。

反響

Cさんより、コピペ時の文字列確認が楽になった、とのご意見を頂いた。

教訓

入力欄を作成しているときは、画面レイアウトの方にとらわれすぎ、
入力欄自体のサイズの考慮はほとんどしていなかった。

しかし、検索する側は 入力後の確認 も行う事があるので、
入力欄のサイズは、入力されるものに応じて変えるか、自動変更できるとよい。

直前に操作をした行はどこ？

最初の状態

データベースの内容をリスト表示するページを作成した。
各行に編集ボタンがあり、モーダルで開いた編集画面で内容を変更することが可能。
※モーダル：Webページにおいて、ポップアップで開く小さなウィンドウのこと

指摘

運用担当Dさんよりご相談を頂いた。
編集が終わった後、自分がリストのどの行まで作業していたのか忘れた。
どうにかならないか？というご意見。

話を伺うと、
リストの上から順に処理をしているらしく、流れ作業なので、
さっきまで編集していた内容を覚えていないということ。
更に、似たような内容の行が多いのでなおさら分かりにくいらしい。

没提案

列に通番を振った。
しかし、通番なんていちいち覚えていない、というご指摘を頂いた。
そもそも、新しい項目が追加されると通番がずれてしまうので、微妙だった。

対応

編集画面（モーダル）を開いた場合、その行全体の色を赤くした。
※色は通常背景と被らなければ何でもOK

反響

Dさんより、直前に編集した行の色が変わり、
今の作業位置が分かるようになった、とのご意見を頂いた。

教訓

データ量が多く、かつ流れ作業で編集していくようなページでは、
編集作業をした行がアクティブ（背景色を変えるなど）になった方が、
流れ作業が遮断されず効率的。

これは、編集画面がモーダルでもページ遷移でも同じだと思う。

並び替えしている項目が分からない

最初の状態

Bootstrap の DataTables という機能を利用し、
データをリスト表示するページを作成した。
各項目でソートができ、ソートした項目に矢印が付く機能がある。

指摘

運用担当Eさんよりご指摘を頂いた。
ソートボタンが小さすぎて、どの項目でソートしているのか分かりづらい、ととのこと。

また、ソート対象の項目の内容が長いと、
列のヘッダ（ソート時に矢印が出るところ）が広くなり、
矢印がどの項目についているのか余計分かりにくくなる、とのこと。

修正前の UI

件名で並び替えているが、並び替えを示す矢印（▼）が隣の障害内容に近いため、どちらで並び替えているのかが分かりにくい

対応

Bootstrap の Datatables では、デフォルトでテーブルの縦の罫線が出てこない。
なので、これをあえて表示することにした。
※ヘッダ行のみ対応。テーブル本体側は特に問題なしとのことで罫線は付けず
これにより、矢印が存在する項目が分かるようになった。

加えて、ソートした列のヘッダに色を付けることにした。

修正後の UI

件名で並び替えをしていることが一目で分かるようになった

反響

Eさんより、立ての罫線とヘッダの色付けにより、
ソートした項目を見間違えることが無くなった、とのご意見を頂いた。

なお、Eさんは普段、スプレッドシート（Excel）での編集に慣れている方で、
罫線がない表には違和感があったのかもしれない。

教訓

JSの外部ライブラリでは、テーブルの罫線を無くすレイアウトがある。
しかし、これはスプレッドシートの表示に慣れている人にとっては
境界が分かりづらく、見づらい。

選択した列に色が付く、など
スプレッドシート準拠の仕様になっていると喜ばれることが多い。

先の "Windows と同じようにして" という件もそうだが、
"Excel と同じような操作にして欲しい" という意見もよく頂く。
ただ、この辺りは利用者によって好みが分かれるため、
メインで利用する方々へのヒアリングや、
モックでの確認を行い、最善な UI を作り上げていくと良さそう。

※本記事に登場する人物やサービスは仮名です。