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

ANDPADでデザインを担当している後藤です。 エンジニア 「このボタン、分かりにくいですね」 開発を進めてて、エンジニアにこう言われたことはありませんか？ 「このボタンって、どう動くんですか？」 「このボタン、気がつきにくいですね。」 そういったときに、どのようにUIの意思決定をしたか、説明して納得してもらう必要があります。 今回は「並び替えボタン」で起きたケースを紹介します。 あまり目立たない機能ですが、データを整理することが多いBtoB向けサービスでは、要望が多い機能じゃないでしょうか。 【目次】 ・どこが分かりにくかったか？ ・エンジニアとデザイナーの通る思考回路は違う ・エンジニアの考えた解決策 ・画面上における機能の優先順位 ・機能単体のゴール ・まとめ どこが分かりにくかったか？実際の画面がこちらです。（※こちらは現在開発中の機能になります） さて、どこが分かりにくかったでし

[s0009]

エンジニアだからという偏見がひどすぎる。普通に「締め日が近い順」のほうがわかりやすいでしょ。メルカリとか賃貸サイトとか見てみ。

[FTTH]

デザイナーのオナニーだよ　「説得」が必要になった時点でデザイナーの負け　自分のデザイン案が通ってユーザがテプラ張ったら満足かな？

[d6rkaiz]

これはどうみても指摘したエンジニアが正しい。元々のデザインではただのラベルにしか見えない。

[verda]

AmazonやGoogleは否定してる方式に近いものを使ってるのと 使ってる記号って折りたたみに使う記号では…？ と言う所が気になる

[tonooooo]

‪『く』がプルダウンメニューのボタンに見えて、昇順降順を意味するように見えない‬ことも問題にありそう

[misoshirukakegohan]

エンジニア的発想云々じゃなく誰が見てもわかりにくい。ボタンをボタンだとわかるようにするか、多少説明的な方がよっぽどマシ。

[primedesignworks]

「締め日」「発注先」「発注状況」という全く違う性質の選択肢に矢印で昇順降順を意味させることに無理がある。デザイナはアイコンを使いたがるが、ユーザにとって最も分かりやすいのは「言葉」である。

[colonoe]

エンジニアは納得したんじゃなくて諦めたんじゃないの

[shields-pikes]

迷ったら、AmazonやGoogleやメジャーなSNSのUIを参考にすべき。それが正解というわけではなく、使い慣れてるから。UIに直観的なものなどなく、全ては学習の結果。例えばトイレマーク🚻自体は何もトイレを示してないよね？

[hachiking]

締め日順の部分がクリッカブルには見えないし、締め日の並べ替えだけでできる機能だと僕も思ったので、もう少し切り替え可能に見えるようにするとかじゃだめなんだろうか？

[wadandandadan]

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

[hitsujiniku-sugita]

エンジニアが正しすぎる

[mttk717]

いやわかりにくいだろコレ

[hush_in]

指摘はもっともな感じする

[unyaa]

発注先名、発注者名、。。。

[securecat]

切替トグルって、これに限らずほんとわからんの多い。機能を表示しているのか、状況を表示しているのか、どっちなのかわからない。特に日付の昇順・降順って概念自体がわかりにくいので、拍車をかけてわからない。

[field_combat]

目立たせたくないって考え方で作られたデザインはあまりよかった記憶ないかな。取捨選択できなくって妥協しちゃってるのが多い印象

[topofbottom]

やべー

[dal]

ボタンを一つにする＝1タップでソートと降順昇順を分けて選べるポップアップが出るのかと思ったら違った。

[mochinaga]

『締め日が近い順』のほうがワンタップで済むので使いやすそうって思った。最終案は2タップ必要になる時があるよね

[razokulover]

締め日だけは流石にわからないよ…

[hazisarashi]

これ「検索 UI」で解決するべき要素まで並び替えに入れてない？

[manabuyasuda]

ボタンを分割するより、位置を覚えられる一覧のほうが使いやすいのかなと思った。 アイコンが開閉っぽいので、セレクトボックスみたいな選択できる感があるといいのかな。

[otchy210]

エンジニアが完全に正しいと思うなこの具体例だと。最終案ならまだ受けいられるけど、ベストは (B) 案だろう。「優先順が低い」からこそ「初期ビューで誰がみても分かる」ことが最重要。

[infobloga]

見た目のかっこよさに囚われて、ユーザが不在になっているデザイナ。

[rryu]

場所を1行取っている時点で十分目立っているのに目立たない扱いになっているのが解せない。

[koogawa]

UIはApp Storeと同じだよね。問題なのは文言で、「締め日が近い順」とかの方がわかりやすい気がする / エンジニアじゃなくてもわかりにくいって言うと思う

[kybernetes]

単純に，利用者のことを考えないで組んだように見えます。

[mizchi]

やばい

[hinodai]

冗長やったけどニコ動みたいなんが良かったんやな

[fa11enprince]

UIとかはどうにか抜きにしてデザイナーだからエンジニアだからではなく単に人に寄る。。。括りが雑すぎる。

[taruhachi]

あまり使わない機能は目立たないようにするという考え方が最初から間違ってると思う。

[FromAtom]

エンジニアとデザイナーの仲悪いのかな……

[zenito9970]

UIデザインはデザインありきでなくて機能ありきというのはどのデザインの書籍にも書いてあると思うがなあ...

[ryo_ryoo_ryooo]

「並び替え」じゃなくて「並べ替え」やな。

[shiget84]

「締め日 ^」の部分、やっぱりラベルと折りたたみに見える。個人的な好みでは目立たない配色でボタンかなー。

[n_231]

絶対この会社のエンジニアになりたくないw

[Ves]

エンジニアが正しいと思う。間が離れているし、締め日と<が連動しているとは思わない。上にスクロールや、上を引いて更新かと思う。/ どうせ大項目を変更しようとするとポップアップを出すのだろうからBで良かった。

[Palantir]

昇順と降順って日本語が最悪！(そうじゃない)

[lifefucker]

ラベルのテキストもUIの一部。「並び替え」と記載するのが一般的では？デザイナ－にnoteでマウントされて一緒に働きたいと思う人いるんだろうか…