UI / UX - ページ 4

ウェブサイト、アプリ、ソフトウェア、メニューを含むすべての製品には回避策が必要です。あなたのナビゲーションは楽しく、創造的で、時には正統ではないかもしれませんが、それは常に最初に機能的である必要があります。情報アーキテクチャのユーザビリティテストについて議論するとき、あなたはしばしば2つの最も効果的なテストについて聞くでしょう：カードソーティングとツリーテスト. どちらのテストも簡単で簡単に実行でき、両方のテストも同じです。 あなたのサイトの組織を最大化するために重要なデータを生み出す. カードの並べ替えは構造を作成する前に行われるため、ユーザーが自然にサイトを整理する方法を理解できます。ツリーテストは、あなたの成功を検証するため、または改善の余地を指摘するための方法として、後に来ます. Hongkiatの詳細： ユーザビリティテスト：知っておくべきこと? Webサイトのフィードバックを改善する7つのステップ ユーザーエクスペリエンスデザインのためのA / Bテスト結果とケーススタディ カードの並べ替え カードソートの美しさはその単純さにあります。あなたがするのはただ あなたの製品のさまざまな要素をノートカードまたはポストイットノートに書く, それからあなたの参加者に彼らに最も理にかなっている方法でそれらを整理してもらいます. それでも処理できない場合は、OptimalSortのようなユーザビリティテストツールを使ってデータを分析することもできます。いずれにせよ、結果はあなたのターゲットユーザーがどのようにするかについてのあなたにしっかりした理解を与えます 直感的に 製品をナビゲートする. 画像：スマッシングマガジン カードソートのバリエーション カードソートには、ニーズに応じていくつかの異なる戦略があります。カードソートの専門家でMaadmobの創設者であるDonna Spencerは、Boxes and Arrowsの記事で彼女の個人的な経験を共有しています。このような単純なアクティビティでは、受け取るデータの種類と有効性に影響を与えるさまざまなバリエーションとコントロールがあります。. 最初の違いは 開いた または 閉まっている, 以下に説明します。 ソートを開く -...

毎日、私たちは数多くの新しいサイトや見慣れたサイトにアクセスし、さまざまな体験をしています。時には、あなたは快適で平均的なものを持っているかもしれませんが、あなたが不幸であれば、あなたは実に恐ろしい経験を得る. ある経験を別の経験よりも良くするのは何ですか? サイトは素晴らしいデザインの頂点である必要はなく、ウィキペディアよりも多くの情報を持っている必要はありません。必要なのは（そしてこれがどれほど難しいことであるかを控えめに言えば）よいユーザーエクスペリエンスです。. さて、本当に簡単でシンプルなユーザーエクスペリエンスを開発するのは膨大な作業を要する可能性があります。そうでなければ、Appleのような会社はより多くの競争をするでしょう - しかし、試して手助けするためにできることはたくさんあります。あなたのユーザー、そしてあなたの側で多くの時間やお金を費やす必要はないもの。多くの場合、それは重要なことですが、Web上でのユーザーエクスペリエンスについても同じことが言えます。小さな変更や最適化を行うたびに、ユーザーに大きな影響を与える可能性があります。. これは、ユーザーにとってより快適なエクスペリエンスを実現するためにできることです。 1.もっと「サインアップ」オプション Eメールアドレス、ユーザー名、Open ID、Twitter、またはFacebookのログインなど、自分に合った方法でサインアップしてみましょう。自分のサイトにユーザーが必要です。あなたはサインアッププロセスをできるだけ簡単にしたいです。簡単になればなるほど、サインアップするユーザーが増えます。それはとても簡単です. 2.その他の「サインイン」オプション サインインしてみましょう。登録時にユーザー名と電子メールアドレスの両方を使用するようにしても構いませんが、それでも両方でサインインさせてください。. 3.パスワードの長さを制限しない 無意味な理由でこれらのフィールドを制限しないでください。最近サイトにサインアップしたところ、次のようなエラーに遭遇しました。 「パスワードは6〜8文字にする必要があります」. [OK]をクリックします。6未満の場合、パスワードの安全性が十分ではありませんが、8文字を超えるパスワードを使用することはできません。本当に? 4.確認メールの送信 あなたは本当に電子メールの確認が必要ですか？はい、サイトによってはおそらくあなたのメールアドレスを確認する必要がありますが、そうする必要のないトンもありますが、それでも確認を求めます。少なくともあなたが私に私の住所を確認するように頼むつもりなら、私はあなたのウェブアプリ/サイト/何でも最初に遊んでみて、その中の値を見てみましょう。もちろん、あなたは私の登録を確認するために私に電子メールを送ることができるので私達全員が私が正しい電子メールアドレスを入力したことを知っている. 5. CAPTCHAフィールド あなたは本当にCAPTCHAが必要ですか？ CAPTCHAは、あなたが多くの申し込みフォームやその他さまざまな奇妙な場所で見つけることができる、わかりにくいテキストです。価格を確認するときにCAPTCHAを入力してほしい航空会社を見つけました。競合他社が航空運賃をチェックするのを防ぐ方法として私に説明しようとした人がいますが、他人が自分自身をチェックしたり自分のサイトにサインアップしたりできないようにすることは本当に価値がありますか？本当に本当にCAPTCHAが必要なのであれば、それが人々が実際に読むことができるものであることを確認するか、またはあなた自身のいくつかの興味深い質問を思い付くことを試みてください。中国の。誰かがあなたの登録プロセスでこれまでにそれを作ったならば、あなたは本当に彼らが今登録するのを妨げたくありません. 6.サインアップ＆サインイン：同じページ できるだけ簡単にする：サインアップページで、ログインを選択させてください。ログインページで、サインアップを選択させてください。ホームページで、これら両方のオプションを表示させます。早くて簡単に何かを成し遂げることができるほど、私はそれをする可能性が高くなります. 7.冗長な質問を避ける 無意味な詳細は尋ねないでください。あなたは私の住所が必要ですか。私の郵便番号（ニュージーランドではほとんど使用されません）が必要ですか。なぜあなたは私にこれらすべての質問をしているのですか？私はちょうどサインアップしたいです！最小限に抑えてください。. 8.社交的になる それを社会的にしてみてください：あなたは宣伝が好きであるべきです - それはあなたにとって良いことであり、そして私の友人と共有することができることは私にとって素晴らしいことです。最近、ほぼすべての男性と彼の犬がFacebookに参加しています。また、かなりの数の人がTwitterにも参加しています。あなたのサイトにももっと関連性のあるオプションがありますか？これらも追加してください。ここにいくつかのボタンがあっても、あなたを傷つけることはありません、そして、他の他の人がその単語をより良いものにすることができます。....

ユーザーエクスペリエンスの借金は必然的に長期にわたって発生します。それはの合計です 期限切れのデザインとユーザビリティタスク 迅速なビジネス上の意思決定、デザインのショートカット、見逃した機会、時間の制約、その他の要因などから派生したもの. ユーザーエクスペリエンス債務は、実際の債務と似ているため、債務と呼ばれます。我々は現在何かを手に入れるが、それだけ 将来それを支払う. 借金が返済されるまで, 関心度 恒久的な費用として発生する. ユーザーエクスペリエンスの負債 - その近親者である技術的な負債 - は、 設計 プロジェクトの質を低下させるアンチパターン。ユーザーエクスペリエンスの負債についてはあまり広く議論されていないトピックであるため、それを認識するのは必ずしも容易ではありません。この記事では、それを詳しく検討しています。. 技術的な負債対UXの負債 Web開発にはさまざまな種類の借金があります。最も有名なのは 技術的債務 それはCSS Tricksによって次のように定義されています。 "合計 妥協 開発プロセス中にコードを書くときに作ります」. ワークフローの後半では、 これらの妥協の結果, これは将来の追加作業を意味します. 画像：FeatureFlags.io技術的な問題は、完全なバグではなく、将来的にコードを完全に保護することは不可能であるという事実ですが、効率的なコード最適化は確かに役立ちます。. アンチパターン、ショートカットのショートカット、無効なアーキテクチャ、または管理が困難な依存関係などを使用すると、技術的な負債が増える可能性があります。ただし、最適で仮想の理想的なシナリオでも回避できません。予測できません。しばらくしてからリファクタリングが推奨されるのはそのためです。. ユーザーエクスペリエンス債務は、以下の点で技術的債務と似ています。 避けることはできません（ただし、減らすことはできます）...

測定できないものを制御および管理することはできません. ありがたいことに、Google Analyticsのレポートはあなたにとって完璧な知識メカニズムです。 Webキャンペーンの測定、計画、管理. 長い間、Google Analyticsでコホート分析を実行することしかできませんでした。 セグメンテーション 機能、これは公表されたWebハックに他ならない. しかし、専用のコホート分析タブが利用可能になったことで、分析結果を提供する決定的な分析を実行できるようになりました。 活用できる必要な行動データ コンテンツ、キーワード、およびWebマーケティング戦略を微調整するため。あなたはできる あなたの個々のコホートレポートをすべて組み合わせる キャンペーンの有効性を高めるのに役立つ方法でデータを表示するために、それらを適切なPDFにマージします。. 前回の投稿「Google Analyticsでのコホート分析」で、コホート分析を実行することによるビジネス上の利点について詳しく説明しました。この第二部では、私は共有するつもりです 必須分析ステップ それ 正しいコホート分析を促進する. 独自のコホート分析を実行する 効果的なコホート分析を行うために、仕事を始める前に以下の点に注意することをお勧めします。 （1） 答える必要がある質問があることを確認してください. これは、コホート分析の全体的なポイントが 実用的な情報を入手する のために 特定の目的, ビジネスプロセス、製品製造、さらには全体的なユーザーエクスペリエンスの向上に役立つデータを求めている企業などです。そのため、これらのプロセスを確実に最適化できるようにするには、次のことが不可欠です。 正しい解決策を見つけるために正しい種類の質問をする. もう一度 -...

Google Imagesは、独自のUIを実行します。 さまざまなWebサイトからのサムネイルプレビュー. これらのサムネイルのいずれかをクリックすると、より詳細と大きな写真で画面が拡大します. これは私が今使った中で最高の画像ギャラリー機能の1つです。, あなたはそれをGridder.jsで複製することができます. この無料のjQueryプラグインは、この効果に合ったプラグインを作成することによって、Googleの素晴らしいUXの足跡をたどります。あなたはできる フォトギャラリーをGoogle Imagesスタイルのギャラリーに変える すべて同じアニメーションと表示機能を使用. 私はこのプラグインに付属しているスピードと使いやすさに心から驚いています。サムネイルをクリックするだけ すぐに大きいショットを表示します そしてアニメーションはとてもきれいです. 画像 説明文のセクションを含める あなたが写真に関連するいくつかの詳細やリンクを追加したい場合に備えて。これは、画像に焦点を当てることを目的とした単純なポートフォリオサイトに特に適しています。. それに加えて、あなたはすることができます Ajax経由でコンテンツを取得する. これはあなたをすることができます 動的サムネイルを作成する 他のWebサイトから、またはAPIを通じてコン​​テンツを取得する. 各クリックイベント コールバックメソッドを提供します, だからあなたはGridderと一緒に他のプラグインやJavaScript関数を実行することさえできます。非常に多くの選択肢があるため、実際にはグリッドフレームワーク全体のように感じられます。! Gridder以来 jQueryで動作します, 依存関係として最新バージョンが必要です。しかし、それだけで（Gridder.jsファイルと共に）必要なのはすべてです。数行のHTMLを使用すれば、グリッドをスムーズに実行できます。. GitHubのページをチェックしてください。 フルセットアップ手順 しかし、ここに...

空の状態ページはあまり知られていないデザイン要素であり、ユーザーエクスペリエンスに大きな役割を果たします。最も単純な形式では、空の状態は 利用可能なコンテンツがないページにユーザーが最初にアクセスしたときに表示されるページレイアウト. これには、モバイルアプリケーション、ソーシャルネットワーク、さらには空のブログカテゴリも含まれます。目的は、空のページを配信することです。 のように見えます 空でないページ訪問者は 差し迫ったコンテンツの手段としてコンテンツの欠如を認識する. 空の状態ページがどのように機能するのか、なぜそれらが非常に重要であるのかを説明します。インターフェイス設計者はこれらの点を考慮し、適切な場合はいつでも空の状態にそれらを適用するようにしてください。しかし、まず始めに、空の状態がどのように機能し、それがインタフェースにどのように価値を提供するのかを調べましょう。. 空の状態の価値 素晴らしい空の状態デザインの美しさは単純さにあります。空のページは説明する ページ上にあるべきもの コンテンツがあると。空の受信トレイのように受動的な場合もあれば、空のTwitterフィードのようにユーザーを積極的に待っている場合もあります。. 空白のページは退屈で退屈で、さらに混乱を招きます。空の状態 ガイダンスを提供 ユーザーが自分が何を見ているのかを理解しやすくするため。空白のページですが、追加のコンテキストが役立ちます. 空の状態はまたの意味を与える “鮮度” 既存のデータがない新しいアカウントで. Redditor Bambo_Ochaによって行われたこのテストは、空の状態デザインについて20の異なるアプリをチェックしました。 CTAボタン、サンプルデータ、そして短いチュートリアルチュートリアルでさえ、さまざまなデザインスタイルが発生しました. ユーザーベースで繁栄するアプリは、空の状態を設計する必要があります ユーザーの行動を促す. このアクティビティには、コンテンツの公開、友達の追加、写真のアップロード、またはアプリの用途などがあります。 Tookapicからの下記のスクリーンはすばらしい例です. しかし、何もしなくても空の状態ページにはまだ価値があります。これらのデザインは主に情報を提供するために作られています. 静的情報も同様に価値があり、空の状態を持つことが本質的に悪いことではありません。たとえば、このページデザインにはトラッキングアプリダッシュボードの現在の統計情報は表示されません。ユーザーはいくつかのメトリクスを追加したい場合がありますが、ダッシュを空のままにしておくことは悪くありません。. 空のブログアーカイブや空のメッセージフォルダにも、同様の静的デザインが最適です。表示するメッセージがなくてもまったく問題ありません。しかし、ページはコンテキストなしで完全に空になってはいけません. 重要ページの要素 空の状態ページで最も重要な要素は コンテキスト....

電話番号, 名前や電子メールのほかに、オンラインフォームで最も頻繁に使用される連絡先情報があります。電話番号フィールドは通常、ユーザーが自分のキーボードを使用して番号を入力する必要があるように設計されています。この方法はしばしば不正確なデータ入力をもたらす。. に ユーザー入力ミスを減らす あなたのサイトのユーザーエクスペリエンスを向上させるには、 GUI これにより、ユーザーは日付選択機能に似た方法で、自分の電話番号をすばやく入力できます。. このチュートリアルでは、次の方法について説明します。 単純な電話番号ピッカーを入力フィールドに追加する. HTML5、CSS3、およびJavaScriptを使用して、以下のデモで表示およびテストできるGUIにアクセスします。ユーザーが実際に有効な電話番号を確実に入力できるように、正規表現も使用します。. ペンを見るÂ??°…¸”Â…¾ CodePenのPreethi（@rpsthecoder）によるダイヤル画面付きの電話番号フィールド. 1.電話番号フィールドを作成します。 最初, 入力フィールドを作成する 右側にダイヤルアイコンがあり、クリックするとダイヤル画面が開きます。ダイヤルアイコンは、3×3で配置された9つのブラックボックスのように見えます。通常の電話で見られるものと同じである必要があります。. 私は使っています 電話 適切なHTML5セマンティクスの入力タイプですが、 テキスト 必要に応じて入力タイプ. 電話番号ピッカーのHTMLベース2.ダイヤル画面を作成する の ダイヤル画面 です 数字の格子 0から9といくつかの特殊文字。それはと作ることができます HTMLのどちらか またはJavaScript. ここでは、JavaScriptでダイヤルスクリーンテーブルを作成する方法を紹介します。そのようにしたければ、もちろん、HTMLソースコードに直接テーブルを追加することができます。....

後でJavaScriptでアクセスするために、特定のHTML要素にカスタムデータを追加したいことがありますか。 HTML 5が登場する前は、DOMに関連するカスタムデータを保存するのは大変なことでした。開発者は、非標準の属性を導入したり、廃止されたsetUserData（）メソッドを使って問題を回避するなど、あらゆる種類の厄介なハックを行わなければなりませんでした。. 幸いなことに、HTML 5では新しいグローバルが導入されたので、これ以上行う必要はありません。 データ-* 任意のHTML要素に追加情報を埋め込むことを可能にする属性。新しい データ-* 属性 HTMLをより拡張可能にする, したがって より複雑なアプリを作成できるようにする, Ajax呼び出しやサーバーサイドのデータベースクエリなど、リソースを大量に消費するテクニックを使用せずに、より洗練されたユーザーエクスペリエンスを作成できます。. 最近のすべてのブラウザでサポートされているため、新しいグローバル属性のブラウザサポートは比較的優れています（IE 8-10で部分的にサポートされています）。. の構文 データ-* 属性 新しいの構文 データ-* attributesは、ariaというプレフィックスが付いた属性と似ています。の代わりに任意の小文字の文字列を挿入できます。 * 符号。また、文字列の形式で各属性に値を割り当てる必要があります。. あなたが作成したいとしましょう 私たちに関しては 各ページに移動し、各従業員が所属する部門の名前を保存します。追加すること以外に何もする必要はありません。 データ部 次のようにして、カスタム属性を適切なHTML要素に設定します。 ジョン・ドウ ジェーン・ドウ...