アクセシビリティを意識したUIライティング
Michaelは人間を大事にしながら、チームが素晴らしいプロダクトを作り上げる手助けをしています。ジャーナリストというバックグラウンドを生かし、便利で実用的なユーザー体験のデザインにおいて言葉が果たす役割を説いてきました。 WCAG2（Web Content Accessibility Guidelines 2.0）のスタンダードを満たしながら書くということは困難かもしれませんが、間違いなく価値があることです。典型的な天才であり、物理学者であるアインシュタインは、かつてこんなことを言いました。 「どんな愚か者でも、物事を大きく、複雑に、暴力的にすることはできる。しかしこの逆を行うためには、ほんの少しの才気と莫大な勇気が必要である」 ありがたいことにこの本は、よりアクセシビリティを意識して書くことの役に立ちます。今まで、次のようなことを学んできました。 なぜわかりやすさが重要なのか エラー状
ステークホルダーを味方につけて承認を得る８つの方法
PaulはUXのデザイナーでありデジタルトランスフォーメーションの専門家です。彼はユーザーを促進するためのウェブやソーシャルメディア、モバイルの活用を、非営利やビジネスの分野で手助けしています。 私たちデジタルの専門家は、自分たちがなにをする必要があるかは理解していますが、他人を説得するのは苦手もしれません。この記事では、私が見つけた他人を説得させる効果的な技術をいくつか紹介します。 仕事をするためには、同僚や経営陣、ステークホルダーを味方につける必要があります。簡単に例を挙げるだけでも、以下のような事態が発生し得るでしょう。 デザインの承認を得る サイトのリデザインを承認するよう経営陣を説得する 時代遅れのシステムをリプレイスする承認を得る 新しいデジタルチャネルの予算を確保する 新しいデジタルガバナンスの導入について合意を得る 考えられる事態はまだまだあります。 私たちががなにをすべき
クレジットカードのオンライン決済で考慮したい３つの好事例
クレジットカードでのオンライン決済は簡単です。私たちのうちほとんどは、財布からクレジットカードを取り出し、カード情報を入力して、送信ボタンを押してオンライン上で支払いを済ませます。しかし、カードデータの入力をさらに簡単にする方法があるのです。 オンライン決済でクレジットカードデータを収集するための、３つの異なる方法をみていきましょう。 方法１. データ入力の手続きをガイドする クレジットカードで支払いをするとき、ユーザーは通常、以下の情報を入力します。 カード番号 有効期限 セキュリティコード フルネーム 下のGIF画像はRamakrishna氏によるコンセプトで、上記の情報を正確かつクリエイティブに要求するものです。ユーザーがクレジットカード番号の入力を始めると、カードの種類（ここではアメリカン・エキスプレス）が表示されます。ユーザーが入力した情報は、画面上のカードに反映されていきます。
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
どんな生年月日の入力フォームがわかりやすいのか
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 生年月日の表記方法は国によって異なります。さらに、生年月日のフォームは年、月、日という３つのデータで構成されているためわかりにくくなりがちです。生年月日の入力フォーマットがわかりにくい場合、ユーザーを苛立たせることになります。 わかりにくいフォーマット ユーザーは、誕生月が最初に来るフォーマット（月/日/年）か、誕生日が最初に来るフォーマット（日/月/年）のどちらかに慣れています。そのため、フォームがいつものフォーマットと異なると混乱してしまいます。 生年月日でユーザーがよく見るフォームは、「月/日/年」か「日/月/年」です。「MM」が「月」、「DD」が「日」を表していることを知っているユーザーもいますが、混乱したり無視するユーザーもいます。
モーダルウィンドウはコンバージョン率が高いという幻想 | UX MILK
これまでにモーダルウィンドウのメルマガ登録フォームを見たことがありますか？ 世の多数のサイトで使われているので、おそらくあるでしょう。多くのサイトで使用されるにはそれなりの理由がありますが、同時にその使用を再考すべき理由もあります。 モーダルウィンドウによるメルマガ登録はコンバージョン率が高いため、多くのサイトで導入されています。サイトにアクセスするすべてのユーザーがまずモーダルウィンドウの対応をしなければならないためです。この操作をする人数が増えるほど、より多くのメールアドレスを入手できるようになります。 多くのサイトがメール購読者数欲しさに、あまり深く考えずにモーダルウィンドウのメルマガ登録フォームを設置します。しかし、これはすべての購読者に価値あるものではなく、運営側は幻想に惑わされているのです。 コンバージョン率の幻想 多数のメルマガ購読者に誰もが大喜びをするでしょう。しかし、その
ユーザーが信頼できる支払い画面を作るための７つのヒント | UX MILK
LiorはAppseeのインバウンドマーケティングマネージャーです。アプリジャンキーで、UXデザインの最新トレンドを追い、最近のお気に入りのアプリとその理由について話すのが大好きです。 アプリには、「求める前にまずは与えよ（Give before you take）」という原則があります。ユーザーにアプリのレビューや通知の許可、商品の購入などをして欲しいときは、まず自分の価値を示すべきです。アプリの中でこの原則がもっとも重要な場所の１つはどこでしょうか？ 答えは支払い画面です。 ユーザーにクレジットカード番号を入力し購入してもらうためには、商品を欲しいと思うだけでは不十分です。それは単なる最初のきっかけに過ぎません。クレジットカード情報が安全に管理され、セキュアな接続が保証され、お金を盗むことがないアプリだと信用される必要があるのです。 なによりも、パフォーマンスやユーザビリティに問題がな
モバイルのフォームに最適なツールチップの表示方法
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームフィールドで便利な情報を表示する際には、どのようなインターフェイスを使うべきでしょうか？ 答えはツールチップです。フィールドのラベルよりも明確に情報を伝える必要があるとき、フォームフィールドにはツールチップが必要です。 たとえば、フォームのラベルがユーザーに馴染みのないわかりにくい用語のときが挙げられます。また、通常より個人的な情報を聞く際に、なぜその情報が必要なのか説明するときにも配置すべきでしょう。 デスクトップでツールチップを表示するのは簡単です。ユーザーはマウスでホバリングできますし、画面に十分なスペースがあり、ユーザーは簡単にツールチップからヒントを得られます。 しかしモバイルでは画面のスペースに制限があり、マウス
デザイナーが覚えておくべき英字タイポグラフィのルール10選
Carrie Cousinsはアナログ、デジタルの両方の出版物においてデザイン、編集、ライターなどのメディア産業において10年以上の経験を積んできました。 Webサイトやアプリにとって、優れたタイポグラフィには、単なる書体の美しさ以上の意味があります。タイポグラフィは、コンテンツと視覚的に強い繋がりを持つと同時に、読みやすくなければなりません。 かなり難しい注文ですが、少し練習すればほとんどのデザイナーにできることです。 本記事では、素晴らしいタイポグラフィのユーザー体験を作り上げる10のルールを紹介します。それぞれのルールでは、タイポグラフィが魅力的なWebサイトの事例も挙げています。 読みやすさの原則 サンセリフ体やWebタイポグラフィを使わなければいけないという考えは時代遅れです。しかし、その思考の背後にある理念は重要です。テキストは、読みやすくなくてはいけないのです。 斬新な書体や
モバイルではメニューを画面下に表示すべき理由
スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
Webサイトのプロジェクトを上手にキックオフする方法
RobertはGatherContentのコンテンツストラテジストです。 また、GatherContentブログの編集長でもあり、さまざまなWebマガジンで記事を書いています。彼のTwitterはこちら。 Webサイトプロジェクトのスタート時には、ローンチを成功させるために、プロジェクトのゴールを理解し、ユーザーと顧客について学ぶ発見フェーズが必要です。さらに、発見フェーズを進めるためのキックオフミーティングも同じように重要です。 受託制作と自社サービスのどちらの場合でも、キックオフミーティングと発見フェーズにおいてチームが協力し合うことで、組織の目的を共有することができます。これらの段階は、プロジェクトを上手く協力しながら進めるために、チームを立ち上げる段階でもあります。 いつキックオフミーティングをすべきか 理想的にはキックオフミーティングは、プロジェクトへの期待を共有するために、プロ
スクロールがユーザー体験に与える影響とは
Alanは、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 些細なことがユーザー体験を大きく左右することもあります。私たちがインターネット上で行うことの大部分は、無意識下で行われます。私たちは、漠然と画面を見て、Webサイトを訪れ、コンテンツを消費しています。 ユーザーはほとんどのことを無意識に行っていますが、Webサイトはユーザーの行動を強く意識しなくてはなりません。Webサイトは、いかなるときでもユーザー１人ひとりのニーズとウォンツに対して責任を負う必要があります。Webデザイナーは、顧客データとペルソナを活用してWebサイトのトーンやビジュアル要素を作り出し、ターゲットユーザーに最適な形でサイトを提供しなければなりません。 画面のスクロールは過小評価され
レスポンシブデザインとアダプティブデザイン、それぞれの長所と短所
レスポンシブデザインとアダプティブデザインの違いに目を向けると、それはデザイナーにとって実に重要な選択肢があることに気付きます。インサイトを踏まえてこれらの選択をすることで、より目的に沿ったデザインを考えることができるでしょう。 モバイルデバイスの普及と多様化に伴い、デザイナーはさまざまな画面サイズに対応する必要が生まれました。これは現在、すべてのWebとアプリのデザイナーが直面している課題です。企業向けの巨大なモニターからスマートウォッチまで、ユーザーがオンラインで情報にアクセスする方法は数え切れないほどあります。 そのようなデバイス間の差を埋めようとするデザイナーには、２つのデザインの選択肢があります。アダプティブなサイトか、レスポンシブなサイトです。 レスポンシブデザインとアダプティブデザインの違いについて混同している人が、一定数見受けられます。どちらのデザインも経験していない人にと
アダプディブデザインか、レスポンシブデザインか
アダプティブデザインとレスポンシブデザインは、両方ともブラウザのウインドウ幅に応じてUIを調整するという点ではとてもよく似ています。しかし、その調整の仕方において両者は異なっています。 UXデザインエージェンシー「Codal」の一員である私たちは、プロジェクトや予算、リソースに関する助言をよく求められます。それはそれでいいのですが、現場の人々の中にはアダプティブデザインというものがあることを知らない人もいます。 では、早速本題に入りましょう。 レスポンシブデザインでは、ブラウザのビューポート（表示領域）に基づいてWebサイトの見え方が変わります。通常、開発者はブラウザの幅によってページ上の要素を動的に変化させます。 レスポンシブなWebサイトは完全に流動的で、スクリーンサイズではなくビューポートに対応します。なぜならレスポンシブなWebサイトは、パーセンテージに基づいたCSSの指定を用いる
ユーザーに受け入れられるプッシュ通知の考え方
UXデザインのコミュニティにおいて、プッシュ通知はよく議論される題材です。マーケティング担当者にとってプッシュ通知は、ユーザーをアプリに復帰させたり、リマインダーを送ったり、最新機能を知らせたりするのに便利でしょう。しかし、一部のユーザーにとっては、プッシュ通知は生産性を低下させ、ユーザー体験を邪魔する悪夢のようなものであることがあります。 優れたUXデザインとは、主観的なものです。ある人にとって素晴らしいユーザー体験は、別の人にとっての悪夢かもしれません。これは、今回の記事のテーマにもつながります。プッシュ通知は便利でしょうか、それとも邪魔でしょうか？ 6,300万人を超えるアプリユーザーに関する最近の調査では、ユーザーにメッセージを送信する頻度が高いほど、モバイルアプリの継続率は増加する傾向にあることが明らかになりました。その増加率は、一般的に３倍から10倍です。 同じ調査によると、通
レスポンシブな検索フォームの実践例
JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 現代のすべてのWebサイトは、レスポンシブなレイアウトを使うべきです。レスポンシブにすることで、どのようなデバイスであってもブラウジングが簡単になりますが、その反面、デザインの難易度は上がります。 検索フィールドは、扱いにくいページ要素の一例です。レスポンシブなレイアウトが増えていく中で、Webデザイナーたちはよりアクセスしやすくより洗練された検索フォームの新たなトレンドを次々と生み出しています。 今回はWebの検索フォームにおけるトレンドについて、いくつか例を見てみましょう。これらの例は、サイトの検索UIを考案する助けになり、次のプロジェクトを始めるためのアイデアを与えて
ユーザー体験を実感するドッグフーディングのメリットと実例
株式会社GMOペパボ UXデザイナー。ホスティングサービス、電子書籍プラットフォーム、アプリ開発などを経て、現在はtoB/toCのEC領域のサービスデザインに従事。今後の労働人口減少社会に対するサービスに強い関心がある [Facebook][twitter]。 ドッグフーディングとは、自社の製品を自分たちで日常的に使い、改善の必要な箇所を探ることです。この手法には、以下のようなメリットがあります。 ドッグフーディングの４つのメリット 1. 共感できる その商品のユーザーが、何が嬉しく何が怖いのか、肌で感じることができます。 2. ユーザーテストの仮説を立てる元になる ユーザーテストをする際には、その様子をただ闇雲に観察するのではなく、仮説を立てて観察することが必要です。「ここが問題なのではないか」という仮説を立てるには、あらかじめドッグフーディングで製品を検証しておくことが有効です。 3.
ヨーロッパのECサイトの動向からみるモバイルで最適なフォーム
ヨーロッパのECサイトが盛況です。その成功の鍵がモバイルフレンドリーなWebサイトだと言われても、私は驚かないでしょう。昨年は、約2億9,600万人のオンラインユーザーが4550億ユーロをECで使いました。そして、その内16.5％は、モバイルユーザーだったのです。 わずか16％だと思うかもしれませんが、モバイルのシェアの成長率は驚異的です。イギリスの大手小売Argosは、ブラックフライデーの午前中、１時間に700,000回の訪問を受け、デスクトップからの訪問はわずか20％であったと報告しました。 この事実から示唆されるのは、モバイルユーザーにとってもっとも大きなハードルの１つであるフォームの扱い方を、Webデザインに従事する全員が考え直すべきだということです。Form Analyticsを運営する企業UseItBetterによる最近の調査が、考え直す際に大きな助けになるでしょう。この記事で
モバイルWebサイトの３つの落とし穴と解決策
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 2016年、世界で初めてモバイルによるインターネットの使用率が、デスクトップによる使用率を上回りました。Google UKの調査では以下のように記述されています。 現在、英国の成人の65％がスマートフォンをインターネット利用の主要デバイスとして使用しています。 人々は情報を検索したり、購入したり、サービスに契約するためにモバイルデバイスを使用します。ユーザーの好みの変化は、ユーザーの期待に拍車をかけています。今日、ほとんどのユーザーは、ひどいパフォーマンスに耐えることはできなくなっています。ユーザーは必要な情報がすぐに手に入らないと、（文字通りワンタップして）別のオプションに切り替えてしまいます。 この記事では、ページ読み込みの遅さやサインインの壁、長い購入プロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
