インバウンド需要が高まるなか、駅の電光掲示板では、電車の行き先が様々な言語で表示されるのを見かけるようになった。ネット上では「日本人が利用しづらい」などと批判的な意見もあるが、実情はどうなのか。駅を…

HTMLでボタンを作るときに意識したいこと https://t.co/8hb0t9Z5fG

アプリケーションをデザインする際、ほとんどのデザイナーはコンテンツページには労力を費やしますが、登録フォームは見過ごしがちです。ユーザーが辿り着くのは、視覚的に魅力がなく、無味で事務的なフォームです。白いバックグラウンド、まっさらなテキストフィールド、煩雑な文章、不快な黒のアウトラインがあちこちに散らばった、登録のモチベーションを掻き立てないフォームです。もしあなたのフォームがそんな状態であれば、改善の余地ありです。 あなたのアプリを使いたいユーザーはフォームの見た目に関わらず登録はしてくれるでしょう。しかし、まだ決めかねているユーザーは事務的なフォームを見て辞めてしまうでしょう。第一印象で多くの見込み顧客を失っている可能性があるということです。もっと機能的で魅力的なフォームにすることで、ギリギリで決めかねているユーザーの背中を押すことができます。 ビジュアルがユーザーを後押しする ある調

■ Jリーグチケットは正当なメールアドレスを受け付けない (この日記を書いているのはなんと10月1日という……日記ビハインドが一ヶ月近いなんてひさびさだ) わが川崎フロンターレも後期からついにシーズンチケットがデジタル化されて、ICカード1枚が郵送されてくるだけになった。めでたい。いっそアプリ化してくれてもいいんだけど。 で、その余波として行けない試合のチケットを譲渡ないし転売できるようになった。リーグ2連覇していまや毎試合チケット完売しているありさまなので、無駄な空席が出ないのは助かりますな。チケット譲渡・転売の手続きをするにはJリーグチケットのアカウントが必要なので、さっそく登録……しようとしたらエラーになった: おれは訓練されたインターネットユーザなので、この時点でピンときてはいるんだけど、いちおう念の為サポートに連絡してみる。翌日届いた返信がこう: Jリーグチケットでは、@前の1文

すべてのボタンがアクションを実行するわけではありません。たとえばトグルボタンなどは、アプリの状態を変えるために使われます。１つのコントロールで複数の機能をもつので、UIのスペースを節約することができます。トグルボタンは押すと状態が瞬時に切り替わりますが、それ故に正しく設計しないと問題が発生します。 反転したカラースキーム vs 通常のカラースキーム トグルボタンの課題は、現在の状態をいかに明らかにできるかというところにあります。視覚的な手がかりが明確でない場合、ユーザーはアクティブな状態を認識できないことがよくあります。これにより、誤ったオプションを選択してしまい、意図しない状態を引き起こしてしまう可能性があります。 特に混乱が起きやすいのは、現在の状態を示す視覚的な手がかりが反転色である場合です。このトグルボタンは一般的ですが、最適解ではありません。ユーザーには、暗い色のボタンがアクティ

一時的に操作ができない無効状態のボタンを表示する場合、どのようにデザインすると、ユーザーの混乱を少なくすることができるか、UXの観点から解説した記事を紹介します。 無効状態のボタンをグレーアウトにしてしまうと、他のボタンにグレーを使用できなくなったり、操作できない不具合かもとユーザーは思うかもしれません。 Why You Shouldn’t Gray Out Disabled Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 無効状態のボタンをグレーアウトにしない理由 無効状態のボタンをグレーアウトにしない理由 ページ上でアクティブになっていないボタンがある場合、あなたはどのように実装していますか？ ボタンを本来の場所から一度削除した後に表示すると、ユーザーは突然現れたボタンに驚くかも

AnthonyはUX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 キャンセルボタンには、さまざまなラベリングがされます。 「今はしない（Not now）」と「あとで（Maybe Later）」などは、その場しのぎのキャンセルボタンの例です。 しかし、ときにはキャンセルボタンが明確に「キャンセル」と書くことが難しかったり、その場しのぎすらもできないときがあります。このようなときにCTA（コールトゥアクション）が成り立たなくなります。 誤キャンセルの防止 たとえば、サブスクリプションサービスをキャンセルするための確認画面には「サブスクリプションのキャンセル」というラベルの付いた破壊的なCTAボタンがあります。このボタンをキャンセルボタンの横に配置するのは混乱しますし、この確認画面から離脱しようとキ

キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ

きっかけ とある目的のため、Qiitaアカウントのパスワードを変えようと、設定画面で入力したところ・・・ (# ﾟДﾟ)まずまずってなんやねん！！ けど、ここで終わったら、ただのクレーマーになってしまうので、 プロの威信をかけて最適な画面を提案しようと思いました。 なぜいけないのか？ 今回のパスワード設定画面には大きく3つの課題があります。 1. パスワードの強度が何を基準に評価されているか分からない 2. メッセージが何を意味しているのか直感的に分からない 3. これで続行できるのかが分からない 全ての課題に共通する考え方として、 「システムが伝えている情報を人間が理解できない」ことが改善すべきポイントです。 エラーメッセージはとても重要な役割を果たします。システムが受け付けられない情報なので、システムとしてはユーザーに改善を求めなければいけません。 パスワード設定画面で伝えるべき情報は

[レベル: 中級] 無限スクロールのモバイル検索結果を 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件とインスタのフィード投稿を見るのが全く辛いと感じませんでした。コスメやファッション、旅行系のキュレーション

※記事本文やコメント欄は長文ばかりのため、パソコンやタブレットなどの大きいディスプレイで読まれることをオススメします。 スマホのような小さいディスプレイだと「長文全体から意味を汲み取る能力」が大幅に低下するためです（それでもスマホの閲覧を意識して改行を多く入れています）。 追記を３つ行いました。 – 追記1 2017/07/15 – 追記2 2017/07/19 – 追記3 2021/01/20 —以下本文— ふと思い立ち、「国内家電は使いやすいのか」を念頭に入れ、その視点を意識しながら家電を使い、この一年間を過ごしてみました。 なぜそれをするキッカケになったのかと言うと、実家に帰省した際に、「洗濯機」の使い方がわからず挫折したからです。 ちなみに僕は今までにMacもWindowsもLinuxも使ってきており、プログラミングもやってきているので、 平均以上の「マシン」への打たれ強さはある方

ラジオボタンはフォームにおける必須要素です。互いに相容れない２つ以上のオプションがある時に使用され、ユーザーは正確に１つの選択肢を選ばなければなりません。言い換えれば、選ばれていないラジオボタンをクリックすることによって、選んでいた他のどんなボタンも選ばないということになります。 ラジオボタンは正しく使用されれば素晴らしいものです。ユーザーが間違ったデータを入力するのを防ぎます。キーボード・ナビゲーションやプラットフォームを通じた信頼できるレンダリングなど、多くの選択肢を提示してくれます。 本稿では、ユーザビリティ・テストによって巧みにつくられたラジオボタンに関する実用的なガイドラインをご紹介します。 ラジオボタンの名前の由来 古いカーラジオにおいて放送局を変えるために使われたことにちなんでラジオボタンと呼ばれるようになりましたが、このボタンは１つ押された時、別の１つは飛び出すようになって

こういう切替スイッチ、苦手なんですよ‥‥。できれば左のほうに統一してほしい https://t.co/dBlWhVj4Cv

スマホ対応の記事で、「≡」のようなメニューを見たことはないですか？ このマークは『ハンバーガーメニュー』と呼ばれるメニューを表す記号です。 本記事では、ハンバーガーメニューと「MENU」と書いてあるメニューボタンでクリック率がどの程度違うのかA/Bテストを報告している記事から、その結果をご紹介します。 基本パターンハンバーガーメニューの最も基本的なデザインです。 単純に三本の線が描かれているだけです。 文字が入ってるパターン三本線の下に「メニュー」と文字があり、アイコンの意味を明示しているパターンです。 囲んでいるパターン三本線をボーダーで囲っているパターンです。 ボタンであることをハッキリと示すことができます。 他にもいくつかパターンがありますが、他のパターンについては「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」をご覧ください。 クリックされやすい

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ダイアログは、ユーザとの対話の中でも特に「確認」や「注意」を促すために用いられる UI コンポーネントの一つです。二択あるいは三択の項目を配置して、YES/NO や OK/Cancel などのインタラクションを用意することで、ユーザとの対話をすることが出来ます。あるいは、単に現在の状態を表示（読込中など）し、その他の各種操作をブロックすることで、待つ必要が有ることを明示することも出来ます。 一方で、ダイアログはその表示が画面の前面に大きく表示され、時にダイアログ以外へのインタラクションを禁じる場合もあることから、使いどころを間違うと非常