Stephen Moyersはオンラインマーケティング担当者、デザイナー、テクノロジーに精通したブロガーです。 彼はロサンゼルスに拠点を置くSPINX Digital Agencyと提携しています。 あなたのサイト内のコンバージョン率を低下させている原因は「検索機能」にあるかもしれません。 致命的な問題ではなくても、コンバージョン率アップに役立っていなければ検索機能の意味がありません。サイト内検索を最適化してユーザー体験を向上させれば、Webサイトのユーザビリティと楽しさを大いに向上できます。 ユーザーはWebサイトが楽しいほど頻繁に訪れ、会員、顧客、購読者などの人数増加に繋がります。サイト内検索の改善は簡単ですが、よくある間違いによって検索するときの体験が邪魔されていることが多いです。サイト内検索を適切なものにするやり方を身につけて、競合サイトと同じ落とし穴にはまるのを避けましょう。 見

デザインそのものと違い、UXデザインにかかるコストはやや抽象的に思えるかもしれません。通常、UXデザインにおけるスケジュールやマイルストーン、コストなどは、推定によって算出されます。そして、このような経験に基づく推測は、実際の事例によって形成されます。 UXデザイナーへの報酬が不明瞭な理由には、さまざまな要因があります。プロジェクトの範囲、必要なテストの量、デザイナーの経験、プロダクトの複雑さや機能の違い、フリーランサーかUXデザイン会社かなどによってコストは変動します。 インターネットで典型的なUXデザイナーの相場を調べれば、実際にこのような曖昧な価格設定を見ることができます。Upworkは、１時間あたり$110〜$270の間で成果物ごとの内訳を提供しています。一方、ほかの会社は、アプリの品質次第で合計$2,000〜$35,000の範囲を提示しています。また、綿密な調査やアジャイルプロセ

企業と顧客との信頼の絆を築いたとき、それは企業と顧客の安定的な関係を作り上げたということになります。企業と顧客の双方と面と向かって話し合った場合、より関係性を強くすることができるでしょう。 しかし、このテクノロジー時代において、人々はモバイルアプリやWebサイト、店頭の端末を用いて企業とやりとりをします。 これは私たちがやりとりにおいて親しみという感情と疎遠になってしまったということを意味します。実際に銀行で支払いをしたいとき列に並ぶ必要はありませんし、買い物は店舗に立ち寄らなくても可能です。いまや同じことがオンラインで行うことができます。 悪いデザインは顧客ロイヤリティを損なう 企業は通常、オンラインの顧客に応じたシステムを構築する傾向にあります。 しかし多くの場合、システムがしっかりとデザインされていないときに、その企業と顧客間における関係性を損なってしまうのです。 人の感性は変容しま

わりかん・決済アプリ「paymo」を運営する AnyPay, Inc.のPM & UI/UX Designer。技術とデザインの力をプロダクトに結集させるプロセスがとても好き。Twitterは@ikutani41。 WebサービスやiOS/Androidアプリのデザインをするとき、どのようなアカウント概念を採用するか検討したことはあるでしょうか？ ほとんどのアプリは、ユーザーごとにアカウントを作って情報やログを紐づけたり、機密情報を扱う場合は認証機構を設けたりする必要があります。また、どのようなタイミングで、どのような操作でアカウントを作ってもらうかはとても重要で、さまざまな選択肢があります。 一般的なデザイン アプリをインストールして初めて開いたとき、下図のような画面をよく見るかと思います。 こういったデザインが採用される背景には、理由があります。 ユーザが慣れているため操作に迷いにくい

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 JavaScript and CSS Tools to Enhance Your Forms フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。 フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。 この記事では、最適なフォームを作るための10の無料ツールを紹介します。 formbase formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージ

Alan Smithは、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 Webデザインのスライダーやスライダーコントロールの使用について、デザイナーにとっては賛否両論です。好きな人もいれば、嫌いな人もいます。タイミングが悪いカルーセルパネルや、ギャラリーの自動スライダーは、サイトのより重要な項目からユーザーの気をそらしかねません。 一方で、手動で動かすスライダーであれば、ユーザーはWebサイトのさまざまなコンテンツの機能やオプションを素早く操作することができます。そのため、スライダーやスライダー操作を追及し、Webデザインにおいてもっとも便利な機会を突き止めましょう。 スライダーとは？ スライダーとは、Webサイトのスライドショーを表す用語です。たとえば、製品

HannahはAppseeモバイル分析のコンテンツマーケティングマネージャーです。UXとモバイルアプリに強い情熱をもち、モバイルテクノロジーについてのインサイトや情報を見つけたり共有したりすることに親しんでいます。 2018年となった現在、UXデザイナーの価値と重要性を理解していないようなモバイルアプリ企業は、世の中に存在しないと考えてほぼ間違いないでしょう。 現在のあらゆるモバイルアプリにおいて、ユーザー体験が中心となっています。UXデザイナーが直面しているのは、後方からでなく前方からリードしていくという困難な課題です。枠に捉われない考え方で可能な限りルールを変えていくために、斬新でクリエイティブであることが永遠に求められています。つまりUXデザイナーには、新たなトレンドを作ることと、現行のトレンドに従うことの２つがつねに求められるでしょう。 この記事では、すべてのUXのプロが自己改善す

デザイナーの仕事は、成果物に対するデザインだけではありません。デザイン制作をしたら、「なぜそのデザインなのか」をステークホルダーに説明し、コンセンサスを取る必要があります。 デザイナーがカバーする領域も広がる中、私たちデザイナーはどのようにデザインを共有するべきでしょうか？ 今回は、UX MILKチームがどのように情報共有を行っているかを紹介します。 デザインドキュメントをどのように共有すべきか デザインドキュメントには、ワイヤーフレームやプロトタイプ、ビジュアルデザインなどさまざまなものがあります。 プロジェクトが進むにつれ、デザインドキュメントは増え、また変更が加えられていきます。すると、これらをどのように保存・整理し、共有するかという問題が出てきます。 UX MILKチームでは、こういった問題を解決するために、DocBaseを使ったデザインの共有を行っています。 なぜDocBaseで

BenはUXPinのコンテンツ戦略担当者です。 Webウェブデザイナーとバックエンド開発者の両方として働いています。 ユーザーテストは専門領域の中でも扱いが難しいものです。なぜなら、共感力や臨機応変な思考、事前準備、バイアスに振り回されない能力などが必要になるからです。テストする側は、ユーザーに特定の方法で行動して欲しいと思っているかもしれませんが、ユーザーテストをすれば真実を知ることができます。 この「真実」もまた厄介です。なぜならそれは主観的なものであり、人は皆それぞれ異なるアプローチで製品を使用するからです。デザイナーは、製品がどのように動作するのかを「知っている」ので、人がどのように行動するべきかに対して多少なりともバイアスを持っています。しかし、人々はその仮説を裏切って、デザイナーが予想だにしない方法を取るかもしれません。人々にとっては完璧に理にかなったものなので、もしその方法に

顧客体験デザインやマーケティングにおける「タッチポイント」という言葉には、多くの異なる定義があります。その理由は、これらの分野が過去数十年で急速に発展していて、用語が流動的になってるためです。さらに、「タッチポイント」という用語は「チャネル」という用語と混同されることも多く、問題をより複雑にしています。 では、もっとも幅広く包括的に「タッチポイント」と「チャネル」という単語を定義していきましょう。 タッチポイントとチャネルの違い タッチポイントとは、顧客が製品、ブランドやビジネス、サービスについての感じ方を変える可能性のある、あらゆるインタラクション（物理的なやりとりがないものを含む）のことです。物理的なやりとりがない例としては、ネットで製品のレビューを見つけることなどが挙げられます。この定義は、VisionEdge Marketingの取締役であるLaura Patterson氏が提唱し

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 ゴーストボタンとは、外枠があるけれど中が透明なボタンのことです。Web上で人気のトレンドですが、多くのデザイナーが間違って使用しています。 クリック率が下がる ゴーストボタンはミニマリストな今どきの見た目と感覚を演出し、デザイナーの間で人気です。騒々しく威圧的な印象を、ユーザーに対して与えません。しかしコールトゥアクション（CTA）として考えた場合、それこそが問題となります。 CTAボタンにはユーザーの関心を引きクリックを促すような、強いビジュアルの手がかりが必要です。ゴーストボタンのミニマルな見た目では、強いビジュアルの手がかりが足りません。結果としてクリック率の低下を生じます。 クリック率が低いと言うことは、ユーザーのほとんどがゴーストボタンを見逃しているということです。サイトでのエ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ハンバーガーメニューとは、メニューを表示するために使われる３本線のアイコンです。アイコンをクリックまたはタップすると、ナビゲーションが表示されます。 デザイナーが書いたハンバーガーメニューに関する記事はたくさんあり、その多くはハンバーガーメニューに反対するものです。読んだことがない場合は、NNGroupのHidden Navigation Hurt UX Metricsを読んでみてください。簡単に言えば、アイコンそのものについてではなく、アイコンの背後にナビゲーションを隠してしまっていることについて議論しています。 しかし、場合によってはハンバーガーメニューが良い選択になりえるでしょう。 第２のナビゲーションとしてのハンバーガーメニュー ハンバーガーメニューの主

同じようなデザインの手直しに人生の貴重な時間を費やしたいと思う人はいません。過去に別のアプリなどで解決されている問題があるのなら、その問題の解決策がテンプレートとして既に存在するはずです。それこそが、誰にでも使えるデザインパターンです。 ここでは、Web上でデザインパターンを見つけるのに最適なサイトをリストアップしました。執筆時現在、これらのリソースはすべて無料ですが、一部はプレミアム版などを支払うように求められる場合があります。なお、この記事は、これらのサイトのアフィリエイトではないことを最初に断っておきます。 UI Patterns UI Patternsでは、好みのパターンを簡単に検索でき、使えると思ったパターンをグループ化することができます。また、自分のデザインでのパターン活用に役立つ、UIデザインパターンに関する多くの興味深い記事があります。 WELIE Interaction

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 ナビゲーションバーは、サイトでもっとも大切な要素の１つです。ユーザーは必要なコンテンツを探し出すとき、ナビゲーションバーを頼ります。ナビゲーションバーのボタンを正しくデザインしなければ、ユーザーに無駄な作業をさせてしまうかもしれません。 間違ったデザインだと、ユーザーがナビゲーションフローのどこにいるのかわからなくなり、困惑してしまうことがあります。また、ラベルやクリックボタンが読み取れないような間違いもあるでしょう。 これからナビゲーションバーのボタンのデザインで犯しがちな間違いを５つ紹介します。これらの間違いを犯している場合は、ナビゲーションバーをすぐに修正しましょう。 １. 選択したボタンが強調されない 多くのデザイナーは、ナビゲーションバーで選択したボタンを強調するようにデザイン

StevenはJustinmindのマーケティングコンテンツの編集者です。Justinmindはウェブやモバイルアプリのプロトタイプ用ツールで、コードを書く前段階でソフトウェアのソリューションをテストしたり視覚化したりできます。 私たちUIデザイナーは、毎日デザインの問題に直面しています。これらの問題に対する最善策を知るために、私たちはユーザーのニーズと適合する答えが見つかるまで、ソリューションを調査、分析、テスト、プロトタイピングします。 UIデザインは、魅力的な見た目を作ることだけではありません。視覚的な美しさ自体は役立つのですが、それよりも、アイデアから実行に至るまでの確実な道筋を、ユーザーの利益になるように統計や証拠で裏付けながら作成することが重要です。確かな道筋がなければデザイナーは、暗闇の中で放った球が的の中心に当たるのを祈ることしかできません。しかし幸運なことに、そんな盲信に

JoeはUX/CXコンサルタントとして長年のキャリアがあり、現在はUXに関する書籍、講演などを多数手がけるUXの伝道師です。 原則として、要件の洗い出しとプロトタイプのレビューに２回以上のスプリント（編注：ここでは１スプリント＝２週間）が必要な場合、それがどんなものであっても複雑すぎると言えます。そのような場合、プロジェクトを保留するか中止しましょう。 私の経験上、２回のスプリントで問題を解決できなければ、プロセスやシステムに深く関わる複雑な問題があるか、あるいは未知の課題が潜んでいると思われます。 いずれの場合も、少し待ってください。このルールにおける唯一の例外は、『Fixing the Enterprise UX Process ebook』で説明したように、重要度と実現可能性が高い機能の場合です。 では、少し前に私が行ったプロジェクトから例を挙げてみましょう。 突如現れた「メッセージ

ホワイトスペース（または「ネガティブスペース」）は、ページの要素と要素の間や、その周りの空いたスペースのことです。多くの人は画面の貴重な部分を無駄にしていると思うかもしれませんが、ホワイトスペースはデザインにおいて不可欠な要素なのです。 「ホワイトスペースは受動的な背景ではなく、能動的な要素とみなされる」  ―Jan Tschichold 今日は、あなたのデザインにあるホワイトスペースを使って、きれいで整頓された印象を与える方法について説明します。 ホワイトスペースとネガティブスペース 「ネガティブスペース」という用語は、元は芸術の世界で物体の形状をより正確にとらえる技法として使われてきました。スペースは白く塗る必要はありません。焦点を当てたいコンテンツと競合しない空いたスペースは、「ホワイトスペース」として分類することができます。実際の白い色と実質的には結びついていないので、「ホワイトス

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザイナーが使う手段の中で、「色」はもっとも強力なツールの１つです。同時に、色という概念は習得するのが難しくもあります。色の組み合わせが無数にある中で、サイトやアプリに使用する色を決めるのは骨の折れる作業です。 そこで作業を簡単にするために、カラーパレットを決める際に便利なツールのリストを作成しました。これらのツールを使えば、多くの時間を節約できるでしょう。 この記事では、以下のような切り口から便利なツールを紹介します。 インスピレーションを受ける 自分だけのカラースキームを生み出す 色のアクセシビリティを考慮する １. インスピレーションを受ける 自然の風景 あなたの周りには、既にたくさんのひらめきのもとがあります。インスピレーションを受けるには、周りを見回す

現代のプロダクトチームが抱えるもっとも大きな課題の１つに、大規模なチームでいかにデザインを進めるか？ということがあります。 大規模チームでは、どのような活動が求められるでしょうか？　どのように協調関係を築き、意思決定をすれば良いのでしょうか？　質の高い成果物をスケジュール通りに届けるにはどうすれば良いのでしょうか？ このスケールの問題にどのように対処しているのかを知るために、今回私たちはAtlassianのデザインチームから以下の３人に話を伺いました。 Ashleigh Sterzenbach―シニアプロダクトデザイナー Erin Howard―シニアユーザーリサーチャー Alastair Simpson―デザインチーフ、Confluence、Hipchat、プラットフォーム担当 2,200人以上の社員を抱える企業において、どのように効率よく協力しながら、プロダクトの品質を保てるデザインチ

Atlassianがデザインに注力し始めた2012年、新しいデザインチーフとしてJürgen Spangl氏が雇われました。彼が始めた最初のプロジェクトの１つは、新しい会社内のデザインシステムであるAtlassianデザインガイドライン（ADG）の作成でした。 当時Atlassianは、デザイン手法を拡大する際に共通する、いくつかの困難に直面していました。 デザインのばらつき：当時は45種類の異なるドロップダウンがありました。 ツールの不足：複数の製品にまたがって仕事を拡大するために、チームはより強力なデザインツールを必要としていました。 余計な質問：Atlassianのデザイナーは、「どのボタンを使うべきか」などのよくある質問に答える時間を減らして、コアな問題により多くの時間を費やしたいと望んでいました。 かつてNathan Curtis氏は、「デザインシステムとは、製品を提供するための