UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto

UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感

[bugcloud]

押せそう感ください

[ultimate-ez]

ハンバーガーとかを代表とするアイコン系は結構リテラシーが必要で、意外と伝わってないことが多いんだよな。。ダサくても「メニュー」と文字で書いた方が300%くらいクリック率上がったり…。悩ましいとこです…

[hirata_yasuyuki]

25の漏斗アイコンはソートではなくフィルタでは。あと、14は状態を表しているように見えるから、ボタン化した方がよさそう。

[otihateten3510]

スターもらえそう感

[mayumayu_nimolove]

自分のサイトだけどハンバーガーメニューのアイコンは本当にハンバーガーにしてる🍔

[sato0427]

電話とメールのやつは押した後にどこまですっ飛ばして挙動するかわからないから絶対押さない。

[nanakoso]

この内容で「アフォーダンス」を使うのは誤用 https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A9%E3%83%BC%E3%83%80%E3%83%B3%E3%82%B9#%E3%83%8E%E3%83%BC%E3%83%9E%E3%83%B3%E3%81%AE%E8%AA%A4%E7%94%A8

[Kiikurage]

アフォーダンス

[sumithsonian]

22のログインに歯車アイコンは見たことないかも。 #重箱の隅

[heavenward]

よいまとめ。矢印とか虫眼鏡はともかくやっぱハンバーガーメニューはハイコンテクストというか、ユーザーの習熟を前提にしてる感はあるなぁ

[ytel]

UI実装、インタラクションプログラミングの参考に

[tjmschk]

好き

[norip44]

#積ん読ページ消化

[iww]

長いリストを分割してリストの一部を表示したときの「進む」「戻る」が、果たしてどっち方向なのかがいつもわからなくなる。

[rryu]

まさか全部アイコンを付ける話とは。「…」でメニューが出るというのはAndroid勢にしか通じないと思う。

[marmot1123]

自分はGmailをブラウザで使用しているのだが、お問い合わせのボタンを押すと勝手に使ってないOSのメーラーが開くので嫌い。

[kmttr]

メモ。

[dynamicsoar]

UIの細かなところにこだわる割に、このエントリでの各項目の番号は「全角数字、（全角の読点）」ってのが不思議…そこは気にしないんだ…

[verda]

モーダルにモーダル感ない あとマーク見るとわりと近年根付いたものあるよね ダウンロードとか

[kura-2]

これが「やれたかも委員会」てやつかい？(違

[yuuAn]

前半特に iOS 寄り

[vndn]

22の「ログイン | 歯車」は何をするボタンなんだろう。2つのボタンがくっついてるのか? でもログインしてないのに何か設定できるのか?

[odmishien]

感感感

[otchy210]

ハンバーガーは議論が続いている間に、だいぶユーザ側の学習が進んじゃって今どきはもう使っていいって方向になってなかったっけ？まあターゲット層にはよるんだろうけどさ、もちろん。

[higamma]

プレースホルダーテキストってよくないって昔聞いたけど最近はどうなの？

[gcyn]

『〜感』をぜんぶ『〜み』にしてほしいみ。

[gabari]

思ったよりそんなでもなかったな…

[youichirou]

漏斗はソートじゃなくてフィルタ。22、23はログインというボタンキャプションが変かも。。

[nacon]

たのしいー

[gabill]

世界一人類の欲望を喚起してるサイト、Amazonがとても参考になる。この記事のサンプルは淡い背景に白い入力ボックスや白いボタンだけど、Amazonは黒背景に白い入力ボックス、白背景にオレンジのボタン。対比が強い。

[kikikaikaikai]

シンプルだけどいい記事

[punychan]

漏斗がフィルターの意味で使われるようになっちゃったけど、あれ自体はフィルターじゃないんだよなあ

[withnic]

わかりやすい

[PEEE]

i18nを考えると水平の矢印は左右ではなく文末か文頭かで考えるようになる

[kanehama]

漏斗アイコンがソートできそう感なくて？？？ってなってたけど、ブクコメ見て、フィルターか。なるほどと思った。

[kamiaki]

○○感って言いたくなる感。

[kimu12]

簡単でわかりやすい。新卒向けだなー

[neko2bo]

スターはこちら ↓