UI / UX - ページ 6

何回タブを閉じて、 あなたにとどまるように頼むモーダルウィンドウ? これは今日では当たり前のようです。それは1つの理由で行われています。! あなたが使用して同様の効果を構築することができます Glio.jsライブラリ. ユーザーのマウスカーソルがいつ動くかを検出するための無料のオープンソースJSスクリプトです。 端に近づく またはそれが ブラウザウィンドウを閉じる. これは試しに使うことができます あなたのサイトに訪問者を維持する. しかし、それはまたに使用することができます 動的効果を作成する ユーザーのマウスが画面の片側に移動した場合. あなたはこれらの多くを見つけるでしょう インテントスクリプトを終了する ウェブ上のいたるところにあり、それらのほとんどは カスタマイズが難しい. しかし、それがGlio.jsを素晴らしいものにしているのです。. それは強力なライブラリです あなたにコントロールを与える 画面で何をするかについて。ユーザーのマウスがブラウザから離れた場合は、 モーダルを表示する, または 背景色を変更する, または 絶対に何もしない. それも付属しています 内蔵ホットスポット ユーザーのマウスが画面の四隅のいずれかに近づくたびに確認できます。あなたもすることができます...

Webデザインの分野は、ほんの数年のうちに息をのむようになりました。世界中で今まで以上に活​​発なデザイナーがいて、全員が革新的なプロジェクトのアイデアについてコラボレーションしています。そしてこれらのトレンドの多くの背後にある概念はプロのグラフィックデザイナーによって開発されました. ユーザーインターフェイスを構築するための技術を完全に理解するまでに数カ月、場合によっては数年かかることがあります。あなたはページ要素のサイズと配置、さらにテキストとラベルの読みやすさを考慮する必要があります。ちょっとした空き時間があれば、Webサイトを構築するための最小限のアプローチと、混乱を減らすためのアプローチを学ぶことができます。それでも、考慮すべき設計手法は他にもたくさんあります。. このガイドでは、いくつかペアにしました。 現代のユーザインタフェース設計技術 と あなたがダウンロードできる景品 と遊ぶ。これが、グラフィックやWebデザインを構築する上でのキャリアに興味を持っている人たちに、やる気を与えてくれることを願っています。プロのWebデザイナーでさえ、次のプロジェクトに役立つこれらの傾向のいくつかを見つけるかもしれません. フルテンプレートでの練習 ゼロから独自のレ​​イアウトをデザインするスキルがある場合は、テンプレートから始める必要はありません。一方、初心者の方は、フルデザインから始めて細部まで細心の注意を払って作業をする方が快適です。. ポートフォリオ、ホームページ、ブログ、その他多くのカテゴリ用の完全なPSD Webサイトテンプレートの優れた無料ダウンロードがいくつかあります。これらは、に慣れるために始めるのに最適なデザインです。 “一般的な” Webレイアウト各Webサイトにはページ要素に対するさまざまなニーズがあるため、どの項目が重要かを判断する必要があります。. これはMartin Fabriciusによって設計された "AppCivilization"と呼ばれるPSDの例です。このレイアウトは、モバイルアプリやWebサイトをデザインするクリエイティブスタジオ向けのものです。一番下に向かって、あなたはポートフォリオの中に展示されたアプリアイコンの小さなパネルを見つけるでしょう。また、デザイン全体が水平方向にヘッダー、トップスライドショー、メインコンテンツ、および暗いフッターに分割されていることもわかります。. オリジナルソース - ダウンロード ランディングページの設計 マーティンによって設計された別の景品を見てみましょう。次の例は、あらゆる種類の商品を販売するために使用できるランディングページです。一般的にこれらはユーザーがダウンロードできるデジタルグッズ、すなわちアプリ、写真、アイコン、テンプレートなどです。. オリジナルソース - ダウンロード しかし彼のデザインの最良の部分は、初心者が回避するのに非常に柔軟だということです。ヘッダーはまだ大きな画像を含む小さなトップナビゲーションを使用していますが、特に予想されるユーザーアクションは異なります。彼は大きい “それを購入!” 折り目の真上にあるボタン。商品のランディングページでは、これはjQueryのスライドショーよりも注目を集めるでしょう。. もう1つの優れたUI技術は、ページの真ん中にある小さなiPhone機能表示です。 Martinには、iPhoneのプレビューショット、App Storeボタン、および主な機能の小さなリストが含まれています。訪問者が商品の詳細を探しているときは、フォーマットされたリストを使うよりも物事を単純にすることはできません。....

すべてのUIデザイナーは 自分のユーザーベースを引き付ける. それがWebサイトやモバイルアプリのポイントです。訪問者を獲得する価値のあるものを提供することです。 興奮してインタラクティブ. しかし、実際にユーザーがWebサイトと対話するのを見ているのでない限り、エンゲージメントを測定することはほとんど不可能です。ありがたいことに、手がかりや指標は次のような目的に使用できます。 ユーザーエンゲージメントを推測する. この記事では、これらのメトリクスがどのように機能するのか、そしてなぜそれらがユーザーからのより大きな関与を意味するのかを説明します。また、これらの指標の改善をテストするために適用できるヒントと戦略についても説明します。. エンゲージメント指標 分析プログラム サイトのすべてのユーザーからのデータを追跡するのに役立ちます。難しさは、これらの測定基準、それらの原因、そしてそれらをどのように改善するかを理解することです。. Googleは、ユーザーが実際に自分のサイトで探しているものを見つけたかどうかを確認するために、エンゲージメントについて特定のページ指標を調べます。これはSEOにとって重要なだけでなく、本物のユーザーエクスペリエンスを生み出すためにも重要です。. 多くの人が、ページのSERPクリック率とソーシャルシェアはエンゲージメントトラッキングの一部であると主張するでしょう。これは本当かもしれませんが、それらはページ上のエンゲージメントよりもむしろオフサイトの概念に関するものです. 改善できる指標 あなたのデザインを変えることによって 私が注目しているのはここで留意すべき点がいくつかあります。 ページ上の時間 1回の訪問あたりのページ数 直帰率 返却訪問者の割合（何人の反復訪問者がいますか？） 訪問者の頻度を返す（どのくらいの頻度？） これらの指標すべて ユーザーの関与を示す, つまり、直帰率が低く、1回の訪問あたりのページ数が2+前後になった場合、一般的に人々はそのサイトをより深く掘り下げています。しかしこの例は 非常に異なるエンゲージメントスタイル サイトの種類に基づいて. さまざまなユーザー戦略 ブログはYouTubeチャンネルとは違った方法で読者と関わりがあり、どちらもSaaS Webアプリとは違った方法で人々と関わっています。覚えておくべき最初の事は各ウェブサイトが持っているということです コンテンツに基づいて動作が異なるユーザー. ユーザー登録のエンゲージメントを向上させたい場合は、...

ユーザーエンゲージメント プロジェクトごとに異なる方法で達成できるトリッキーな測定基準です。ほとんどのデザイナーは インタフェース 彼らが対話性について話すとき、しかし ページコンテンツ ユーザーとのやり取りも促進できます。より良いユーザーエンゲージメントのために、それは重要です 魅力的なコンテンツを書く, そしてその内容を提示する キャッチーなデザイン. それは言われたよりはるかに簡単に言われます、しかしあなたがいくつかの基礎を学ぶならばあなたは問題を起こさないでしょう。 優れたコンテンツを備えた集中UI あなたのプロジェクトのために. この記事では、増やす方法を紹介します。 ユーザーインタラクションとコンテンツエンゲージメント Webベースのインタフェースで。これらは、訪問者を引き付けるための最も一般的な2つの方法です。 経験を最適化する あなたは問題ないページメトリック上のその有利な時間を増やすことがないでしょう. ノベルティを捉える の概念 ノベルティ 文脈に基づいて、一般的に新しい、多くの場合非常に新しい、ユニークなイベントや事柄を定義します。. 新しいイベント なぜなら彼らは 目立つ. これは、新規性があると思われる要素を表すインターフェース設計にも当てはまります。 ページから飛び出す. 私は最近、エンゲージメントに関してノベルティの重要性を議論する素晴らしい記事を見つけました。ユーザーは 斬新な体験、インターフェース、そしてUI要素に引き寄せる 彼らは違うからです。異なって設計されているという唯一の事実は、しばしば注目を集めます。. 一般的な例の1つは、ほとんどのランディングページにあるアクションボタンの呼び出しです。また、ノベルティを構築することができます...

Webサイトのナビゲーションメニューは、通りの道路標識やショッピングモールの階層ディレクトリのようなものです。. 自分がどこにいるのかを最初に知らずに目的地にたどり着くことはできません. 実生活と同じように、Webデザインのナビゲーションは非常に重要であり、Webサイトのユーザビリティやユーザエクスペリエンスにおいて大きな役割を果たします。. 今日では、面白くて独創的で珍しいデザインのナビゲーションメニューがたくさんあります。しかし、Webサイトでの効果的なナビゲーションはどうでしょうか。 それはどのように見えるべきですか? 今日は、Webデザインにおけるナビゲーションの重要性についての観察と知識を共有したいと思います。私はあなたがあなたのウェブサイトのナビゲーションとユーザビリティを改善するためにあなたが使うことができるいくつかの簡単なヒントを明らかにします。次のデザインを計画する方法についてのアイデアを提供するための効果的なナビゲーションメニューの例もいくつかあります。. 情報アーキテクチャ ナビゲーション計画は情報アーキテクチャから始めるべきです。座っていることが重要です ウェブサイトの情報アーキテクチャについてのブレインストーム. Webサイトで提供されている機能の種類、最も重要な機能、および情報階層の下位レベルに配置できるものを特定する必要があります。. 情報アーキテクチャ 機能、ユーザーのニーズ、サイトマップ、テストおよびワイヤフレーム. 情報アーキテクチャの詳細については、Cameron Chapmanの記事「Information Architecture 101：Techniques and Best Practices」を参照してください。. ユーザー対応テクノロジの使用 Flash、JavaScript、jQueryなど、ナビゲーションバーを構築する際にWebサイトのナビゲーションへのアクセスを妨げる危険性があるものを使用しないでください。または、少なくともそれらが適切に機能低下することを確認してください。. 詳細については JavaScriptの優雅な劣化, CSSとJavascriptのための10の便利なフォールバックメソッドについてのこの記事をチェックしてください。. 簡単でわかりやすい用語を使用する 使うほうがいい 簡単でわかりやすく理解しやすい用語 あなたのナビゲーションメニューのために業界だけの用語に従うことよりも。把握するのに1秒か2秒以上かかるリンクは、おそらく使用には不向きです。. ユーザーがリンクをクリックしてそのリンクが何をもたらすのかを把握する必要がある場合、これはあなたの訪問者にとって悪いユーザーエクスペリエンスの一因となります。. 例...

Webは、誰もが世界中のどこからでも同じコンテンツにアクセスできる場所であるべきです。レスポンシブテクニックは、 デバイスにとらわれない設計. しかし、どうですか アクセシビリティにとらわれないデザイン? Webのアクセシビリティは何年も前からありますが、その実装には技術とWeb開発における新しい進歩が必要です。多くの開発者が手助けを望んでいますが、アクセシビリティを考慮して設計する方法を理解するのは難しいです。これには、コントラストの高いテキスト、視覚障害者用のオーディオページ、最適化されたメディア、およびJS / CSS以外のブラウザ用のフォールバックが含まれます。. この記事では、アクセシビリティ・デザインの基本、それが何であるか、それが解決することを目指していること、そして始めるためにあなたがとることができるステップをカバーします。注意してください、これは非常に詳細な主題であり、それを完全に理解するのに数カ月または数年の練習が必要になります。しかし、その利点は努力に値するものであり、あなたのすべてのWebプロジェクトはすべての訪問者にアクセス可能なコンテンツの永続的な印象を与えるでしょう。. アクセシビリティ入門 一般的に言って、アクセシビリティとはコンテンツを構築するという考え方です。 それは誰でも消費することができます. これには、読むことができない盲目の人々や、マウスやキーボードを操作できない身体障害のある人々（またはそのいずれか）が含まれることがあります。. しかしそれはまたを持つ人々を含むことができます わずかな欠陥 ビジョンの中で。それには 失読症または読解問題. 実際のところ、 “ウェブアクセシビリティ” 含む 誰かがWebサイトと対話したりWebサイトを利用したりする方法に影響を与える可能性のあるあらゆる障害. ウィキペディアの定義で説明されているように、おそらくもっと重要なのは、Webアクセシビリティが提供できるものです。 それでも、Anne Gibsonは、彼女のList Apartの記事で、Wikipediaの定義は曖昧過ぎると主張していますが、そうではありません。 ただ 障害者についてそれは本当に みんな ウェブ上で 世界中から インターネットへの最適なアクセスがない可能性があります....

次の大きなデザインの試作に時間がかかりすぎると感じる場合は、一歩後退する必要があります。 手元にあるツールやリソースを評価する. 新しく改良されたUXツールやUIリソースがWeb上で頻繁に追加されても、同じワイヤフレーミングまたはプロトタイピングツールを使用する理由はありません。より強力なツールとより新鮮なUIキットで、より速く、より良く、よりスムーズに作業. それを手助けするために、プロトタイプ作成に最適な15のUXおよびUIツールがあります。それらのいくつかは運ぶ ドラッグアンドドロップ 機能性と 強力なチームコラボレーション機能, 一方、開発段階で、場合によってはリアルタイムで、デザインのユーザビリティをテストするための優れたリソースが他に含まれています。. Hongkiatの詳細： 20の美しいUIとUXデザイナーのポートフォリオ （その他）便利なWebユーザビリティテストツール ユーザビリティテストについて知っておくべきこと ユーザーエクスペリエンスデザインのためのA / Bテスト結果とケーススタディ 20のUIコンセプトスケッチと既成のデザインの対比 プロト.io Proto.ioを使用してドラッグアンドドロップとゼロコードでブラウザ上にプロトタイプを作成することができ、その上で複数のタッチとマウスのイベントをあらゆるUI要素に適用できます。 Proto.ioはあなたがどんなプロトタイピングツールでも見つける最も現実的で便利なインタラクティブなUIライブラリの1つも持っています。実際のデバイスでプロトタイプをテストし、そのコラボレーションツールを使ってチームメンバーとあなたのデザイン関連の情報について話し合う. ピドコ Picodoのドラッグアンドドロップ機能を使用して、クリック可能なワイヤフレームをすばやく簡単に作成してから、無制限の数のワイヤフレームモックアップまたはプロトタイプをリアルタイムでチームメンバーやクライアントと共有します。その強力なフィードバックとディスカッション機能は、大きくて簡単な共同作業に役立ちます。後で再利用するためにカスタマイズしたテンプレートを保存し、お気に入りのモバイルデバイスでプロトタイプをテストします. フォンモバイルマテリアルデザインUIキット Visual HierarchyによるVonn Material Design UIキットには、8つのカテゴリに分類された100の美しいドラッグアンドドロップUIテンプレートがあり、すべてAndroidアプリの作成に最適です。テンプレートは1920×1080ピクセルで設計されており、モバイル機器に最適です。コーディングは不要です。 Vonn UI Kitは、スタイルとレイアウトに関するGoogleのマテリアルデザインガイドラインと完全に互換性があります。....

私たちはビッグデータの世界に住んでおり、ほとんどの人はワークフローの一部としてこれらの数字を理解する必要があります。. データ管理は大変な作業です。 そしてここがダッシュボードが登場するところです. ダッシュボードはインターフェースです Webサイトと管理者間 これは、データを追跡するためのサイト、サービス、またはツールを制御するのに役立ちます。適切に設計されたスマートダッシュボードは、多くの時間を節約し、適切なレポートを作成するために重要な情報を迅速に識別するのに役立ちます。ダッシュボードの設計では、混乱を避け、重要な情報を強調し、メトリクスに優先順位を付けることを検討する必要があります。. この記事では、あなた自身のデザインにあなたを刺激する多くの素晴らしいダッシュボードデザインを見つけるでしょう。もしあなたがデザインをしていないのなら、この記事の後半部分をチェックしてダッシュボードのリソースを無料でダウンロードできるようにしてください。. あなたのインスピレーションのためのダッシュボードUI ダウンロードする25のダッシュボードUI ダウンロード可能なダッシュボードをいくつか紹介します。 PSDをダウンロードするには、ダッシュボードの画像をクリックしてください。. フォーマット： PSD [ダウンロード] フォーマット： PSD [ダウンロード] フォーマット： PSD [ダウンロード] フォーマット： PSD [ダウンロード] フォーマット： PSD [ダウンロード] フォーマット： PSD [ダウンロード] フォーマット：...