ソリッドとアウトライン、認識しやすいアイコンはどちら？
UX Movementの創立者、ライターです。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始めました。 モバイルアプリをデザインするとき、ソリッド（塗りつぶし）かアウトライン、どちらのアイコンを使用するか決めなければいけないときがあります。ユーザー体験にはどちらが最適なのでしょうか。 単なる好みの問題だと考える人もいますが、研究によると、認識の速さに違いがあることがわかっています。 ソリッドアイコンとアウトラインアイコンのどちらを使うべきかがわかれば、モバイルアプリの操作がしやすくなります。ユーザーはアイコンをより早く認識し、正しい選択をすることができるのです。 「Filled-in vs. Outline Icons: The Impact of Icon Style on Usability」という調査で、アイコンのスタイルは作業効率
ボタンの「ロード中」状態を見せるべきタイミング
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 ボタンには、押せる状態と押せない状態以外にも、ロード中という状態があります。このロード中という状態は通常数秒以内で処理されるため、ユーザーには見えません。しかし通常よりも処理に長い時間がかかる場合、ロード中の状態を見せないことはアクションエラーを誘発します。 アクションエラー もしアクションを実行するのに自分が想定したよりも長い時間がかかったら、ユーザーはシステムが自分のリクエストを実行しているのかどうかを知る必要があります。何も起こっていないように見えたとしたら、彼らは正しくボタンを押せなかったと思うでしょう。この誤解が、彼らに再度ボタンを押させてしまいます。 ユーザーが２回以上ボタンを押すと、システムの処理が増えるだけでなく、操作が二重にな
UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
www.Javable.Jp - Notes：ブラウザの戻るボタンを無効にする
Web アプリケーションを作成していると、時にブラウザで履歴をさかのぼる機能をを無効にしなければならない時があります。 よく使われる方法としては、「サーバ側でページアクセス毎にユニークなトークンを発行して、ブラウザの戻るボタンで戻ってフォームを再送信した場合に、エラーを発生させる」といったものもあり、各種フレームワーク等で提供しているような機能は、このようなサーバサイド側での処理を作り込んだものが多いのではないかと思います。 しかしいま携わっているプロジェクトでは、「前の画面さえ表示したくない」…つまり戻るボタン（BackSpace キーや、 Alt + ← 、マウスの割り当てボタンなど）そのものが効いていないか、効いていないように見える、という事をしなければならず、最初は愚直にキーイベントを取得したり等をしていたのですが…、こんな方法がありました↓ （戻りたくない画面に） <script
かっこいいメニューバーが簡単に作れちゃうジェネレータ「MenuBuilder」*二十歳街道まっしぐら（FC2ブログ時代）
「MenuBuilder」はメニューバーを作ってくれるジェネレータです。 グラデーションやマウスオーバーも実装できます。 色を選んで、パターンを指定したらおしまい！ 簡単すぎ！ 画像およびHTML（CSS）もダウンロードできるので、使い回ししやすいです。 以下に使ってみた様子を載せておきます。 まず「MenuBuilder」にアクセスします。 メニューはグラデーションになります。 上側がデフォルトで下側がマウスオーバーのときです。 そしてお次は、メニューのパターンを指定します。 あと、横に並べるのか、縦に並べるのかも選択しましょう。 「Generate&Preview」すると、最上部で仕上がりを確認できます。 「Download」ボタンをクリックすると、画像とHTML（CSS）を一括でダウンロードできます。 HTMLファイルを開くと、このように先ほど作ったメニューが実装されています。 HT
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
