エンジニアにUIが分かりにくいと言われた - 並び替えボタン編

ANDPADでデザインを担当している後藤です。

エンジニア 「このボタン、分かりにくいですね」

開発を進めてて、エンジニアにこう言われたことはありませんか?

「このボタンって、どう動くんですか?」
「このボタン、気がつきにくいですね。」

そういったときに、どのようにUIの意思決定をしたか、説明して納得してもらう必要があります。
今回は「並び替えボタン」で起きたケースを紹介します。

あまり目立たない機能ですが、データを整理することが多いBtoB向けサービスでは、要望が多い機能じゃないでしょうか。

【目次】
・どこが分かりにくかったか?
・エンジニアとデザイナーの通る思考回路は違う
・エンジニアの考えた解決策
・画面上における機能の優先順位
・機能単体のゴール
・まとめ


どこが分かりにくかったか?

実際の画面がこちらです。(※こちらは現在開発中の機能になります)

さて、どこが分かりにくかったでしょう?
エンジニアが分からないと言った機能はこちら。

もともと僕が考えていた遷移はこんな感じです。
データを渡したときには遷移のプロトタイプまで作っていませんでした。

※GIFなので読み込みに時間かかるかもです。


画面右上の「締め日 ^」の部分がどう動くのか?ということがエンジニアに伝わらなかったようです。


エンジニアとデザイナーの通る思考回路は違う

今回は工期がタイトだったため、プロトタイプを作らなかったことも混乱の原因でした。
しかし、会話していくうちに、デザイナーの僕とエンジニアでは思考する順番が違うということに気がつきました。(当たり前ですが)

デザイナーとエンジニアの通った思考回路がこちらです。

デザイナー:
・どこに並び順のボタンを置こう。
・毎回使うわけじゃない。
→「あまり目立たせないようにしよう。」
エンジニア:
・どこを押したら並び順選択の画面を出せばいいの?
・ボタンの境目が分からないよ!
・この機能ってユーザーも分からないでしょ。
→「このボタン分かりにくいですね。」

確かにエンジニアの視点で考えたら、機能的にボタンの境目が分からないデザインでしたね。
こういう文脈から「ボタンが分かりにくい」というフィードバックが出てきたのかな、と思いました。

エンジニアの考えた解決策

エンジニアが考えた代替案はこうです。

(A)「並び替え」/「昇順降順切り替え」、どちらも独立したボタンだと分かるように、目立たせる。
(B) 「並び替え」/「昇順降順切り替え」を1つのボタンにする

しかし、このどちらかを選ぶと、新たな課題が出てしまいます。(後述)

どう伝えたら良いか悩んだ末、2つのポイントに絞ってUIを説明することにしました。
それは、画面上における機能の優先順位と、機能単体のゴールの2つです。


画面上における機能の優先順位

僕がUIをデザインするとき、一画面での機能の優先順位を考えるようにしています。

今回デザインしている発注情報の一覧画面について整理しました。

「発注一覧画面」における機能の優先順位
⑴ 発注の情報(カードになっているもの)
⑵ 発注を追加する導線(FAB)
⑶ 発注情報を見やすくする設定(並び替え / 昇順降順切り替え)

こうして見ると、並び替え / 昇順降順切り替えの機能は、優先順位が低いことが分かります。

エンジニアが提案してくれた(A)ボタンを目立たせるを実施すると、主要な⑴、⑵の動作を妨げる恐れが出てきてしまいます。


機能単体のゴール

画面上での優先順位を整理したら、機能単体にフォーカスして考えます。

並び替え機能のゴールを考えてみると、

①「表示の仕方を変えたいな」と思った時に機能が見つかる
② 一度使ったら覚える
③ 気軽に変更ができる

この3点になると思います。

なぜ(B) 「並び替え」/「昇順降順切り替え」を1つのボタンにする、は採用できないのか、プロトタイプをmtgの場で作成して試してもらいました。

※GIFなので読み込みに時間かかるかもです。

選択肢がかなり読みにくいですね。思わず手を止めてしまいます。
これではユーザーが開くたびに考え込んでしまいそうです。

(B)案は ③ 気軽に変更ができるに反するため採用できない、という回答をして、納得してもらいました。

しかし、UIを検証してみて、「締め日」が何を指しているのか分からないということに気がつきました。
そこで、並び替えの条件には全て「締め日順」のように「順」を語尾につけるよう変更しました。

実際の決定UI

ボタンを分けた方がシンプルで、毎回サッと切り替えるだけの機能ということが伝わり、元の案に近い形で納得してもらえました。


まとめ

今回のまとめです。

・エンジニアとデザイナーの思考回路は違う
・思考回路の違いを踏まえてUIの意思決定の背景を説明をする
・UIを説明する上でのポイントは2つ
 - 画面上における機能の優先順位を明確にする  
 - 機能単体のゴールを明確にする

並び替え機能という地味な機能でしたが、UIパーツひとつひとつをしっかり考える・チーム間でそれを共有する良いケースだったと思いました。


デザイナー・エンジニア募集中

ANDPADを一緒に作ってくれる方を募集しています。最近移転してオフィスがすごく綺麗になりました。ぜひ遊びに来てください。

・デザイナー
・iOS / Android エンジニア
・フロントエンドエンジニア
・サーバサイドエンジニア


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

94

ANDPAD

ANDPAD DESIGN

建築現場の働き方を変えるプロジェクト管理アプリ「ANDPAD」のUI/UXデザイナーが、プロダクト開発のプロセスや日々の工夫についてお送りします。デザイナー・ディレクター募集中! https://www.wantedly.com/companies/88oct/projects
5つのマガジンに含まれています

コメント10件

Ernest Croftさん 続き
最後に、1コメント目の「意見対立」の部分なんですが、これは僕の書き方が良くなかったかな、と思っています!背景の説明不足だったんですが、この機能改修は画面数がとても多く、割ける工数が限られてました。(もちろん皆さんそうだと思います)ですので、僕もエンジニアが実装しやすいデザインであるべきだと思っています。その点、意見が対立していたというよりは、僕が少しユーザーから離れた観点でUIを考えていたかもしれないと気がつき反省しました!

と、長くなったんですが、とても勉強になりました!Joel Sporsky氏の文献は、時間あるときに他の章も読んでみます!
gene_pinefieldさん

コメントありがとうございます!この記事を書きました後藤です!

承認ボタンに見えてしまったものは、発注状態です…!初見の方にとっては、これも分かりにくいデザインでしたね…!
もともとセルに収めるつもりだったんですが、①工事名 ②取引先名 ③価格 ④発注状態 ⑤締め日の5つは要件上外せなかったためカードにしました。(セルには収まらないですよね…笑)
社名は、受注者の側から見ると一社だけになってしまうので、一番左上に置いたときに固定になってしまうなあと思ったのと、社名によっては、右側に置いたものと被って、省略させるのが嫌だなあと思い一行分設けました。

「役所で使われる文面のように」という視点は、自分の中にない視点でした!似ているか分かりませんが、PC側のテーブルにある並び替えを何とかアプリに持ってこれないか悶々としていました。(一番上のタイトル部分を押せば、並び替えの優先度が変更できるUIのことです)。PCの画面をネイティブ化する、というタスクだったので、とても内容が多くなっているんですよね…!
おおっとなるほど、先行事例は未確認でした……浅さが出てしまったスミマセン。確認してみたのですが、iOSファイルだと「表示順序: ~」という文言の分かりやすさに加えて右端に▼をつけてましたね。これはアイコンの置き方としてはマテリアルデザイン的に言うとちょっと怪しい感じもあると思うんですが、ドロップダウンリストを連想させるために敢えてやっているのかなとも思いました。

あとは先頭への戻りやすさに影響する、1画面に収まる要素(カード)数も関連があるのでは? と思って別の事例を探してみたんですが、個人的に使っていたniftyの賃貸物件検索アプリ(iOS)で、Top Barにソートアイコンを置いていました。カードが割とでかく1画面に2.5個くらいのサイズ感なので(もしかしたらソート機能の重要度とかの別のファクターが理由なのかもしれませんが)そういう場合はメニューに置くという選択肢を考えてもよいのかもしれません。
Ernest Croftさんそうですよね!iOSは文言と▼で分かりやすい表記だと思います。引き出さないと出てこない点は、表示内容減らしたかったんでしょうが、少し分かりづらいですよね。niftyの賃貸物件検索アプリをダウンロードしてみました!カードの要素数なかなかありますね。要素数が影響するのでは?というところは、深掘りしていませんでした。いま思い出したんですが、トリバゴのアプリはこの議論を割と満たしてる並び替えボタンを置いてました。「画面下部に固定+ アイコン + 並び替え + 現在の条件」と、網羅されてますね!最後に少し言い訳なんですが、僕も並び替えボタンに、ここまで時間を割いていなかったので、痛いところを突かれたポイントが沢山ありました!笑でも、とても勉強になったので、機会あれば他アプリも含めてまとめてみたいと思います🤔
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。