本当にあったUIの指摘事項（Windows 利用者からの指摘編）

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

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

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

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

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

+ <font color="DarkGray">他の指摘事項（運用担当者からの指摘など）には以下ページから移動できます。
  - [本当にあったUIの指摘事項（メインページ）](https://qiita.com/hantyou-k/items/2ed207a6ff38a2da58e5)

## 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ページにおいて、ポップアップで開く小さなウィンドウのこと
<img width="57%" border="5" alt="モーダル" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568441/73336dc3-717a-a43e-53db-665b0c81383c.png">

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

話を伺うと、
リストの上から順に処理をしているらしく、流れ作業なので、
さっきまで編集していた内容を覚えていないということ。
更に、似たような内容の行が多いのでなおさら分かりにくいらしい。
##### 没提案
列に通番を振った。
しかし、通番なんていちいち覚えていない、というご指摘を頂いた。
そもそも、新しい項目が追加されると通番がずれてしまうので、微妙だった。
#### 対応
編集画面（モーダル）を開いた場合、その行全体の色を赤くした。
※色は通常背景と被らなければ何でもOK
#### 反響
Dさんより、直前に編集した行の色が変わり、
今の作業位置が分かるようになった、とのご意見を頂いた。
#### 教訓
データ量が多く、かつ流れ作業で編集していくようなページでは、
編集作業をした行がアクティブ（背景色を変えるなど）になった方が、
流れ作業が遮断されず効率的。

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


## 並び替えしている項目が分からない
#### 最初の状態
Bootstrap の DataTables という機能を利用し、
データをリスト表示するページを作成した。
各項目でソートができ、ソートした項目に矢印が付く機能がある。
#### 指摘
運用担当Eさんよりご指摘を頂いた。
ソートボタンが小さすぎて、どの項目でソートしているのか分かりづらい、ととのこと。

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

**修正前の UI**
<img width="100%" border="5" alt="修正前" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568441/f4d633a6-3ad1-7d43-5fc4-785204ebb698.png">

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

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

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

**修正後の UI**
<img width="100%" border="5" alt="修正後" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568441/9357d5a9-e61b-282c-1ef9-caa2267139c5.png">

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

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

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

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

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

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


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