池田 泰延 on Twitter: "HTMLでボタンを作るときに意識したいこと https://t.co/8hb0t9Z5fG"
HTMLでボタンを作るときに意識したいこと https://t.co/8hb0t9Z5fG
登録フォームのテキストフィールドにはオフホワイトを
アプリケーションをデザインする際、ほとんどのデザイナーはコンテンツページには労力を費やしますが、登録フォームは見過ごしがちです。ユーザーが辿り着くのは、視覚的に魅力がなく、無味で事務的なフォームです。白いバックグラウンド、まっさらなテキストフィールド、煩雑な文章、不快な黒のアウトラインがあちこちに散らばった、登録のモチベーションを掻き立てないフォームです。もしあなたのフォームがそんな状態であれば、改善の余地ありです。 あなたのアプリを使いたいユーザーはフォームの見た目に関わらず登録はしてくれるでしょう。しかし、まだ決めかねているユーザーは事務的なフォームを見て辞めてしまうでしょう。第一印象で多くの見込み顧客を失っている可能性があるということです。もっと機能的で魅力的なフォームにすることで、ギリギリで決めかねているユーザーの背中を押すことができます。 ビジュアルがユーザーを後押しする ある調
Jリーグチケットは正当なメールアドレスを受け付けない - ただのにっき(2019-09-06)
■ Jリーグチケットは正当なメールアドレスを受け付けない (この日記を書いているのはなんと10月1日という……日記ビハインドが一ヶ月近いなんてひさびさだ) わが川崎フロンターレも後期からついにシーズンチケットがデジタル化されて、ICカード1枚が郵送されてくるだけになった。めでたい。いっそアプリ化してくれてもいいんだけど。 で、その余波として行けない試合のチケットを譲渡ないし転売できるようになった。リーグ2連覇していまや毎試合チケット完売しているありさまなので、無駄な空席が出ないのは助かりますな。チケット譲渡・転売の手続きをするにはJリーグチケットのアカウントが必要なので、さっそく登録……しようとしたらエラーになった: おれは訓練されたインターネットユーザなので、この時点でピンときてはいるんだけど、いちおう念の為サポートに連絡してみる。翌日届いた返信がこう: Jリーグチケットでは、@前の1文
トグルボタンが混乱を招く理由
すべてのボタンがアクションを実行するわけではありません。たとえばトグルボタンなどは、アプリの状態を変えるために使われます。１つのコントロールで複数の機能をもつので、UIのスペースを節約することができます。トグルボタンは押すと状態が瞬時に切り替わりますが、それ故に正しく設計しないと問題が発生します。 反転したカラースキーム vs 通常のカラースキーム トグルボタンの課題は、現在の状態をいかに明らかにできるかというところにあります。視覚的な手がかりが明確でない場合、ユーザーはアクティブな状態を認識できないことがよくあります。これにより、誤ったオプションを選択してしまい、意図しない状態を引き起こしてしまう可能性があります。 特に混乱が起きやすいのは、現在の状態を示す視覚的な手がかりが反転色である場合です。このトグルボタンは一般的ですが、最適解ではありません。ユーザーには、暗い色のボタンがアクティ
UXデザイナーから学ぶ、無効状態のボタンをグレーアウトにしない理由
一時的に操作ができない無効状態のボタンを表示する場合、どのようにデザインすると、ユーザーの混乱を少なくすることができるか、UXの観点から解説した記事を紹介します。 無効状態のボタンをグレーアウトにしてしまうと、他のボタンにグレーを使用できなくなったり、操作できない不具合かもとユーザーは思うかもしれません。 Why You Shouldn’t Gray Out Disabled Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 無効状態のボタンをグレーアウトにしない理由 無効状態のボタンをグレーアウトにしない理由 ページ上でアクティブになっていないボタンがある場合、あなたはどのように実装していますか？ ボタンを本来の場所から一度削除した後に表示すると、ユーザーは突然現れたボタンに驚くかも
キャンセルボタンに「キャンセル」と書いてはいけないとき
キャンセルボタンには、さまざまなラベリングがされます。 「今はしない（Not now）」と「あとで（Maybe Later）」などは、その場しのぎのキャンセルボタンの例です。 しかし、ときにはキャンセルボタンが明確に「キャンセル」と書くことが難しかったり、その場しのぎすらもできないときがあります。このようなときにCTA（コールトゥアクション）が成り立たなくなります。 誤キャンセルの防止 たとえば、サブスクリプションサービスをキャンセルするための確認画面には「サブスクリプションのキャンセル」というラベルの付いた破壊的なCTAボタンがあります。このボタンをキャンセルボタンの横に配置するのは混乱しますし、この確認画面から離脱しようとキャンセルしようと思って誤ってサブスクリプションをキャンセルしてしまう恐れもあります。 「キャンセル」を「今はしない」や「あとで」などのその場しのぎなキャンセルラベル
キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
ぼくのかんがえたさいきょうのパスワード設定画面 - Qiita
きっかけ とある目的のため、Qiitaアカウントのパスワードを変えようと、設定画面で入力したところ・・・ (# ﾟДﾟ)まずまずってなんやねん！！ けど、ここで終わったら、ただのクレーマーになってしまうので、 プロの威信をかけて最適な画面を提案しようと思いました。 なぜいけないのか？ 今回のパスワード設定画面には大きく3つの課題があります。 1. パスワードの強度が何を基準に評価されているか分からない 2. メッセージが何を意味しているのか直感的に分からない 3. これで続行できるのかが分からない 全ての課題に共通する考え方として、 「システムが伝えている情報を人間が理解できない」ことが改善すべきポイントです。 エラーメッセージはとても重要な役割を果たします。システムが受け付けられない情報なので、システムとしてはユーザーに改善を求めなければいけません。 パスワード設定画面で伝えるべき情報は
Google、モバイル検索のページネーションを廃止。「もっと見る」による無限スクロールへ変更
[レベル: 中級] 無限スクロールのモバイル検索結果を Google は導入しました。 「次へ」でページネーションして2ページ目、3ページ目に移動するのではなく、「もっと見る」で続きの結果が出現します。 正式導入 「もっと見る」による無限スクロールのモバイル検索結果は昨年12月にテストしていたことが確認されています。 しかし今回はテストではなく、正式導入になります。 Google 検索の Twittere 公式アカウントがアナウンスしました。 We've launched a new “More results” button that makes it easier & faster to get more search results on mobile. Now additional listings load below the ones already being viewed,
もう縦スクロールって疲れません？進化する私たちの指と視野｜ワカモノのトリセツ
こんにちは！現役女子大生二人組による若者の今を伝えるメディア「ワカモノのトリセツ」です。 春休み満喫中の私たちは、自然と携帯を見る時間が増えました。 そんな時に、 「あれ？最近縦スクロールするのがもう嫌になってきたぞ？！」と思うようになったことに気づいたのをきっかけに、今回は縦スクロールについて私たちの最近の価値観をお話しします。 ■ 縦スクロールで満足できていた時代縦スクロールコンテンツで代表的なものはこちら。 ・Instagramのフィード投稿 ・コスメやファッション、旅行系のキュレーションメディア ・Twitterのタイムライン ・クックパッド ・Safari、Chromeなどのウェブブラウザたち 昨年の夏頃までは、まだ縦スクロールへのストレスが薄かった気がします。20件、30件とインスタのフィード投稿を見るのが全く辛いと感じませんでした。コスメやファッション、旅行系のキュレーション
お知らせ : 京都新聞
File Not Found. 該当ページが見つかりません。URLをご確認下さい。 お知らせ 事件・事故のジャンルを除き、過去６年分の主な記事は、インターネットの会員制データベース・サービスの「京都新聞データベース plus 日経テレコン」（http://telecom.nikkei.co.jp/public/guide/kyoto/）もしくは「日経テレコン」（本社・東京 http://telecom.nikkei.co.jp/）、「ジー・サーチ」(本社・東京、 http://www.gsh.co.jp)のいずれでも見ることができます。また、登録したジャンルの記事を毎日、ネット経由で会員に届ける会員制データベース・サービス「スカラコミュニケーションズ」(本社・東京、http://scala-com.jp/brain/) も利用できます。閲読はともに有料です。 購読申し込みは下記のページから
日本の家電の「絶望的な使いづらさ」について | CoardWare Blog
※記事本文やコメント欄は長文ばかりのため、パソコンやタブレットなどの大きいディスプレイで読まれることをオススメします。 スマホのような小さいディスプレイだと「長文全体から意味を汲み取る能力」が大幅に低下するためです（それでもスマホの閲覧を意識して改行を多く入れています）。 追記を３つ行いました。 – 追記1 2017/07/15 – 追記2 2017/07/19 – 追記3 2021/01/20 —以下本文— ふと思い立ち、「国内家電は使いやすいのか」を念頭に入れ、その視点を意識しながら家電を使い、この一年間を過ごしてみました。 なぜそれをするキッカケになったのかと言うと、実家に帰省した際に、「洗濯機」の使い方がわからず挫折したからです。 ちなみに僕は今までにMacもWindowsもLinuxも使ってきており、プログラミングもやってきているので、 平均以上の「マシン」への打たれ強さはある方
ラジオボタンをUIに用いる時のポイントを解説！より良いサイト、アプリの利用環境のために
ラジオボタンはフォームにおける必須要素です。互いに相容れない２つ以上のオプションがある時に使用され、ユーザーは正確に１つの選択肢を選ばなければなりません。言い換えれば、選ばれていないラジオボタンをクリックすることによって、選んでいた他のどんなボタンも選ばないということになります。 ラジオボタンは正しく使用されれば素晴らしいものです。ユーザーが間違ったデータを入力するのを防ぎます。キーボード・ナビゲーションやプラットフォームを通じた信頼できるレンダリングなど、多くの選択肢を提示してくれます。 本稿では、ユーザビリティ・テストによって巧みにつくられたラジオボタンに関する実用的なガイドラインをご紹介します。 ラジオボタンの名前の由来 古いカーラジオにおいて放送局を変えるために使われたことにちなんでラジオボタンと呼ばれるようになりましたが、このボタンは１つ押された時、別の１つは飛び出すようになって
LV41 on Twitter: "こういう切替スイッチ、苦手なんですよ‥‥。できれば左のほうに統一してほしい https://t.co/dBlWhVj4Cv"
こういう切替スイッチ、苦手なんですよ‥‥。できれば左のほうに統一してほしい https://t.co/dBlWhVj4Cv
クリック率が違う！？4タイプのメニューアイコンの比較検証！ : ニキビ跡
スマホ対応の記事で、「≡」のようなメニューを見たことはないですか？ このマークは『ハンバーガーメニュー』と呼ばれるメニューを表す記号です。 本記事では、ハンバーガーメニューと「MENU」と書いてあるメニューボタンでクリック率がどの程度違うのかA/Bテストを報告している記事から、その結果をご紹介します。 基本パターンハンバーガーメニューの最も基本的なデザインです。 単純に三本の線が描かれているだけです。 文字が入ってるパターン三本線の下に「メニュー」と文字があり、アイコンの意味を明示しているパターンです。 囲んでいるパターン三本線をボーダーで囲っているパターンです。 ボタンであることをハッキリと示すことができます。 他にもいくつかパターンがありますが、他のパターンについては「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」をご覧ください。 クリックされやすい
その Dialog は本当に必要ですか？ - Qiita
ダイアログは、ユーザとの対話の中でも特に「確認」や「注意」を促すために用いられる UI コンポーネントの一つです。二択あるいは三択の項目を配置して、YES/NO や OK/Cancel などのインタラクションを用意することで、ユーザとの対話をすることが出来ます。あるいは、単に現在の状態を表示（読込中など）し、その他の各種操作をブロックすることで、待つ必要が有ることを明示することも出来ます。 一方で、ダイアログはその表示が画面の前面に大きく表示され、時にダイアログ以外へのインタラクションを禁じる場合もあることから、使いどころを間違うと非常に鬱陶しく見えるものでもあります。また、ダイアログのキャンセル操作が出来ない場合において、いつまでもダイアログが出続けてしまうとユーザの負担は大きくなります。 この記事では、ダイアログを使用している場面において、その他の表現方法や実装の工夫を使うことができる
ひどいユーザインターフェースを一目で見極める | POSTD
前のブログ記事 を書いた時、「訓練された目ならば、不親切なソフトウェアを結構な頻度で簡単に見抜けるようになる」ということに気づきました。 それは初対面の人に第一印象を抱くのに似ています。私たちは初めて会った人の印象を判断するのに コンマ1秒もかからないそうです 。 人を判断するのとは違い、ユーザインターフェースの良しあしを判断することは、私たちが（今はまだ）本能的に行っていることではありません。しかし、たった数分で、もしくはもっと早く、ユーザインターフェースがじっくり考えられて作られたものか、ちょっとした思い付きで作られたものかどうかを判断することは可能です。 どうして判断がついたのかや、どんな警告サインが出ていたのかについては確証がなかったため、私は注意を払い、メモを取ることにしました。 以下は私が気付いたことです。 用語/ラベルの使い方があまりに総称的/一貫性していない これはユーザの
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
池田 泰延 on Twitter: "HTMLの<a>タグ。 見過ごしがちですが、ユーザービリティーを下げないために注意したい書き方。 https://t.co/eOkx2hLTBq"
古都こと on Twitter: "近年こういうテキストボックスをちょくちょく見かけて、あんまりよろしくないよな〜と感じてる https://t.co/aUVzQpwTUe"