フードデザインダイジェスト2017年7月

7年間、インターフェイス、新しいツール、パターンのコレクション、興味深い事例、歴史的な話題に関する最近の記事の定期的なレビューを公開しています。 テーマ別の数百のサブスクリプションのテープから、公開する価値のある出版物の約5％が選択されています。 以前の資料： 2010年4月-2017年6月

パターンとベストプラクティス

最も嫌われているオンライン広告テクニック

Nielsen / Norman Groupの興味深い研究は、Webおよびモバイルでのさまざまな広告フォーマットの侵入性について研究しています。 確かに、実際のバナーではなく、ワイヤーフレームに基づいて作成されましたが、いずれにしても、さまざまな注意散漫の影響に注目し、一般にアンチレーティングは論理的に見えます。







トピックの続き：

• Therese Fessendenは、 ユーザーの広告に対する嫌悪感に影響を与えるマイナス要因を分析します。 彼らはそれを必要な悪と考え、特定の条件下でそれに耐える準備ができています。

完璧な日付と時刻のピッカーの設計

Vitaly Friedmanは詳細に日付と時刻を選択するパターンを解析します。 特定のタスクに適したソリューションを選択するための多くの興味深い例とヒントがあります。







トピックの続き：

• 彼はまた、良いスライダーを作る原理についても話しました。 各側面の多くの例。

指、タッチ、人のためのデザイン、パート3

ユーザーが携帯電話をどのように使用するかに関するSteven Hooberの記事の新版の終わり。



モバイルサブナビゲーション

Nielsen / Norman GroupのRaluca Budiuは、モバイルの第2レベルのナビゲーションパターンを解析します。



5度のユーザーアシスタンス

Jim Rossは、参照情報の単純な提供から、問題の状況の独立した解決策まで、ユーザーとのプロアクティブなインターフェイスの関与の5つの段階をリードしています。



大画面での小さな写真-モバイルからデスクトップへのスケールアップ

Nielsen / Norman GroupのAmy Schadeは、大規模なWeb用にモバイル画像を最適化することの重要性を想起します。そうしないと、画像がトリミングされたり、スペースを取りすぎてしまいます。



持続可能性のための製品設計

Artyom Dashinskyは、フロントエンドソリューションの改善が環境にどのように役立つかを示します。たとえば、プリンターペーパーを節約したり、ルートを最適化したりします。



Baymard Institute Research

• Baymard Instituteは、 製品のヘルプ情報を正しく投稿する方法に関するヒントを提供しています 。 優れたソリューションは、企業からの厳選された回答と顧客レビューを組み合わせたものです。
• Baymard Instituteは、在庫のない商品を注文する機会を常に提供することをお勧めします。買い手を失うよりも、配達時間を長くする方が良いでしょう。

設計システムとガイドライン

パラダイム-Mail.Ru Group Design System、パート1：ビジュアル言語

数年にわたり、ポータル設計チームMail.Ru Groupは製品の更新と標準化を行ってきました。 メディアプロジェクト、モバイルWeb、および部分生産性サービス（他の製品は徐々に接続されています）を実行するデザインシステム、ピクトグラムとイラストのスタイルが形成され、プロモーションレターとプロモーションサイトが標準化されています。 もちろん、すべてのサービスですべてがうまくいくわけではありませんが、どこかで最初の再設計がすべての問題を解決するわけではありませんでしたが、過去数年間の大きなブレークスルーは見逃せません。 更新プロセスを高速化し、作業を公開するために、 パラダイムデザインシステムの一部を公開しています （これは内部ツールであり、モバイルバージョンはまだありません）。







私たちが理解している設計システムとは何ですか？

1. ビジュアル言語-製品インターフェースの作成方法を定義します。 通常の言語と同様に、アルファベット（変数）、単語（インターフェイス要素）、文（コンポーネント）、テキスト全体（画面および製品）があります。 アルファベットは変更されず、語彙は時間とともに徐々に変化しますが、それらからの文章とテキストは常に異なります。 design.mail.ru/paradigm/に示されています 。
2. 技術レベルの統合コンポーネントが唯一の真実の源です。 設計はそれらに「縫い付けられ」、サービスは単一のリポジトリからそれらを受け取り、更新します。 実際にそれらを使用するMail.Ruブランドの製品：メディアプロジェクト、モバイルWeb、生産性サービスの一部。 現在、それらは社内でのみ利用可能です。
3. デザイナーツールのテンプレートは、高レベルのスケッチだけでアイデアをすばやく表示する方法です。 理想的な状況では、レイアウトは強制しませんが、単一のコンポーネントから組み立てられます。 今年の初めにそれらについて書きました 。

2012年に設計システムの実装を開始し、2015年に全体的なビジョンを形成しました。 多くのことが先にありますが、現在の開発の公開は、プラットフォームの開発における楽しいマイルストーンです（ ポータルナビゲーションがちょうど3年前に広範囲に更新されたことは面白いことです）。 Habréの一般原則と現状について詳しく説明しました 。 フィードバックとアドバイスを歓迎します。



PSところで、私たちはFacebookとTwitterでデザインチームの発表のために2つのニュースチャンネルを立ち上げました 。 まあ、すべての消防士のために中 。



設計システムの採用

設計システムの助けを借りて製品の統合プロセスを管理するというトピックに関する数少ない記事の1つ。 Nathan Curtisは、プラットフォームの段階的な実装計画について説明し、製品チームとの連携に関するヒントを提供します。 トピックの続き：

• ライアンラムジーは、エレクトロニックアーツインフラストラクチャチームがジョイスティックデザインシステムをどのように作成し、推進したかについて語っています。 すべては設計チームのイニシアチブから始まり、彼はプラットフォームがどのように信頼を得たかについて語っています。
• ノボシビルスクイーストバンクテクノロジーチームは、クライアントプロジェクトの設計システムの開発について話します 。
• デザインシステムなしで製品サポートの面白い原価計算 。 Nathan Curtisは、ボタンのみにどれだけの労力が費やされるかを計算しました。 数値自体は不健康ですが、関心を計算するアプローチです。

空の状態？ あなた、ノー、アイデア、ハウ、ワーク、ゴー、イントトーマス、アミライトのような？

Meg Robichaudは、Shopifyインターフェースのゼロ状態の一連のイラストの作業について語っています。 非常に興味深いアプローチ。イラストが現在のシナリオでの望ましい気分、成功、失敗、ニュートラルなメッセージを伝えます。







UIコンポーネントライブラリでの間隔の処理

Chris Pearceは、設計システムのコンポーネント間のインデントの記述方法について熟考しています。 彼は3つのアプローチを分析します：コンポーネントの一部をインデントする、インデント用の個別の要素を作成する、「親」レベルで距離を決定する。 最初のアプローチを使用します。



骨折

モジュール設計のためのCSSフレームワーク。



Android O

• Googleのニックブッチャーは、Oに表示されたレスポンシブアイコンを操作する可能性とニュアンスについて説明しています 。これらは、さまざまなシェルにうまく適合し、興味深いアニメーションを作成できます。
• Liam Spradlinは、 Androidの基本的なナビゲーションツールについて詳しく説明しています。 それらのそれぞれについて、彼が移行の歴史に関与しているかどうかが注目されることは素晴らしいことです。

iOS 11

• 主要な設計更新の概要を含む公式WWDC 2017セッション 。

ユーザーの理解

更新された共感マップキャンバス

Dave Grayは、人気の共感マップテンプレートを更新しました。 目標、充填順序、ヒントを追加しました。







共感のプロンプト

技術的および物理的な制限があるユーザーに注意を向けることを目的とした、デザイナー向けの動機付けのコレクション。



メディア使用習慣-人々が何を、なぜ、いつ、どのようにオンラインで読むか

私の同僚であるオレシャ・クコレヴァ、アンナ・プレオブラジェンスカヤ、オルガ・シドロヴァは、ユーザーがメディアを読む方法に関する最近の定性的研究の結果をUXmattersに発表しました。 その間、回答者は日記をつけ、ニュースサイトの実際の読み物のビデオを83時間収集しました。

情報アーキテクチャ、概念設計、コンテンツ戦略

どのマップが本当に必要ですか？

James Kalbachは、相互作用マップのタイプを解析します。 彼はそれらを3つのグループに分けます-ユーザーモデル、コンテキストと目標、そして未来。 トピックの続き：

• ジェームスカルバッハは製品でユーザーインタラクションカードを作成する利点をリストアップします 。

情報アーキテクチャレンズ

ダンブラウンは、情報アーキテクチャの原則の分類を更新し、プリズムを介して43の「レンズ」のリストを編集しました。これらのプリズムを使用して、インターフェイスソリューションの有効性を評価できます。







迅速かつ大規模なサービス設計

ディエゴ・ダリアは、IBMでのサービス設計を扱うためのアプローチが、設計思考のバージョンに基づいてどのように形成されたかについて語っています。







ネームゲーム

Stacey King Gordonが、製品、機能、画面の命名に対するFacebookのアプローチについて語っています。 それらは十分にシンプルで、不必要な意味を作らないようにする必要があります。

インターフェイス画面の設計と設計

デザインのバージョン管理-それは本当です。ここにあります。話して、それについて詳しく学びましょう

Caio Calderariは、デザイナー向けにバージョン管理ツールのレビューを行いました。 主にSketchレイアウトで動作し、Gitに基づいています。







カクタス

レイアウト用のGitベースのバージョン管理ツール。 基本バージョンは無料です。



Adobe XD

• Adobe XDのコレクションサイト 。 記事とトレーニング資料もあります。

スケッチ

• プラグインは、さまざまなレベルの複雑さのマテリアルデザインインターフェイス要素を生成します 。
• レイアウトをGitと同期するためのプラグイン。
• レイアウトのバージョン管理用のスケッチプラグイン。

原理

• バージョン3.0がリリースされました 。 多数の中小規模のインターフェースの改善。

カイト

• バージョン1.5がリリースされました 。 新製品の-原理からのドライバーのアナログ、およびインタラクティブなプロトタイプを作成するための新しいイベント。 一般に、カイト側には多くの利点があります。仕事のためのイベントの集まり、パスアニメーションを含むアニメーションを操作する大きな機会です。 さらに、少なくとも（さらに悪いことに）アプリケーションで使用できるコードの生成。 マイナスの点-劣ったモバイルアプリケーションと、WYSIWYGの原則とは対照的に、プロパティと値の操作に重点を置いています。

figma

• デスクトップアプリケーションの2番目のバージョンがリリースされました 。 このツールは、 インタラクティブなプロトタイプを作成し、開発者に転送するためのレイアウトを準備することも学びました。
• ツールの2番目のバージョンのリリースについてフィグマディランフィールズの頭との議論 。

フレーマー

• 新しいバージョンで作業するためのフレーマー設計チームのヒント 。

オムニグラフ

• バージョン3.0がリリースされました。 復習

Vectr

• ツールの概要 。

用紙サイズ-国際的な用紙サイズ、寸法、フォーマットに最適なリソース

標準サイズの用紙フォーマットとドキュメントに関する素晴らしいリマインダー。



Gifmock-高品質のGIFを簡単に作成

このアプリケーションは、インターフェースアニメーションを、品質とサイズが最適化されたGIFに組み立てるのに役立ちます。 Sketch用のプラグインがあります。



ゴースト1.0

最も有望なブログプラットフォームの1つであるGhostは、長年のベータ版から生まれました。

ユーザーの調査とテスト、分析

検索ログ分析-Web UX研究で見落とされがちな機会

Nielsen / Norman GroupのSusan Farrellのサイトでの内部検索クエリを分析するための優れた方法論。 どこを探し、何を探し、どのような結論と改善を行うべきか。







ツリーテスト、パート2-結果の解釈

Nielsen / Norman GroupのKathryn Whitentonによる情報アーキテクチャのテスト手法のレビューの第2部。 データを収集し、テスト結果を比較する方法を示します。



カセット2.0

より多くの言語をサポートし、他の多くの改善を施したアプリケーションの2番目のバージョンがリリースされました。



アラブ市場でのユーザー調査の実施方法

アラブ首長国連邦でのユーザー調査に関するストーリー。UXスタジオは、既存の製品を市場に持ち込むために現地市場の機能を検索しました。



別のレンズ

Airbnb設計チームからのカードの形でカスタム調査を実施するための構造化されたヒントのセット。

ブラウザーでの視覚的なプログラミングとデザイン

ベンコールマンとダングッドウィン-UXの設計：プロトタイピング

Sitepoint Publishersは、2017年3月にBen ColemanとDan GoodwinのDesigning UX：Prototypingをリリースしました。 UXmatters は、HTMLプロトタイプに特化した第7章を公開しています 。





超新星スタジオ

レイアウトをモバイルプラットフォーム用の実用的なアプリケーションに変えることを約束する別のツールですが、非効率なコードについて常に不満を言っています。 今回は、React Nativeのスケッチレイアウトから。 発表 。



新しいスクリプト

• スクリプトの2番目の部分は、異常な見出しアニメーションです。
• アモルファスのバイオのような形状のアニメーション 。

CSSアニメーション

• Val Headは、CSSアニメーションでCSS変数を使用する方法を示しています 。 例は基本的なものですが、設計システムに適用するというアイデアを示唆しています。

ウェブサイト速度テスト-Cloudinaryによる画像分析ツール

このサービスは、サイト上のグラフィックを最適化するのに役立ちます。 問題を表示するだけでなく、許容可能な品質で問題を解決し、サムネイルを自動的に生成する方法も説明します。 どのように機能し、なぜ作成されたのか 。



ツールチップとトグルチップ

Heydon Pickeringは、可用性の要件に対処するために、設計システムの標準コンポーネントを引き続き分解しています。 このリリースでは、インターフェース要素のヒント。

指標とROI

製品使用状況メトリックを介したユーザーエクスペリエンスの監視

Jerrod Larsonは、製品設計者の仕事を追跡するのに役立つメトリックスの大規模なコレクションを提供します。 それらのそれぞれについて、彼はそれらを数える方法と理由を示します。

UX戦略と管理

UX組織の成熟度

ジェフサウロは、デザインの観点から企業の成熟度に関するアンケートを開始し、150人のデザイナーの調査からの最初の抜粋を引用しています。 成熟度レベルごとの参加者の分布に関する興味深いアプローチであることが判明しました-UX戦略について自分のサイトで同じことを計画する必要があります。 別の計算では、デザイナーとユーザー研究者の開発者に対する比率について説明しています。



企業文化の変化には、委任ではなく運動が必要

Bryan WalkerとSarah A. Souleが、IDEOがDr. Pharmaceuticalの企業文化の変革にどのように貢献したかについて語ります レディ



書評：創造的な変化



今年初め、ホートンミフリンハーコートは、創造的で画期的なアイデアを提供するだけでなく、それらを実装する方法に関する本であるジェニファーミューラーのクリエイティブチェンジを出版しました。 UXmattersは彼女のレビューを行いました。

製品管理と分析

プロダクトマネージャーとして適切な判断を下す

プロダクトディレクターのShopify Brandon Chu氏は、意思決定へのアプローチ-迅速なミスを強調する方法、ミスを犯してもよい場所、結果を詳細に検討する必要がある本当に重要なものについて語っています。 その決定テンプレートはUX対応です。







優れたPMはソリューションに時間を費やしません

ポール・アダムズは、インターコムの問題判別プロセスがどのように構築されているかについて語っています。 彼らは時間の40％を費やして、何をする必要があるのか​​、そしてその理由を理解し、その後になってソリューションの解決に進みます。

事例

中国向けの建物

Vivian Wangは、中国でのAirbnbの立ち上げと、製品のローカライズへのかなり深いアプローチについて語っています。



新しいオンラインがあります！

Medusaチームは、新しいテキスト翻訳インターフェースの作成について話します。 その他の場合：

• Louis Eveillardは、ランプメーカーのAcrobates de GrasのWebサイトでの作業について語っています。
• Taurie Davis はGitLabナビゲーションの再設計について語っています。

物語

史上最も成功した教育用コンピューターゲームの設計方法

R.フィリップ・ブシャールは、1985年にリリースされた伝説的な教育ゲームOregon Trailの2番目のバージョンの作成について詳しく語っています。

トレンド

音声UIデザインパターンの発見

CooperのJoe KappesとJiwon Paikは、音声対話パターンを分析します。 これらは、さまざまなタスクに適した5つのトリックです。







人間中心の機械学習

GoogleのJosh LovejoyとJess Holbrookは、デザイナー向けの機械学習機能を使用したアプローチについて説明してくれました。 アルゴリズムの準備ができる前に、開発者、アナリスト、およびプロトタイプサービスと通信する方法。







トピックの続き：

• サミムウィニガーは、 いくつかの仕事を引き受けるテキストエディターへの現代のアプローチについて説明します 。 彼は、著者の能力を拡張するアルゴリズム設計の10の手法を解析します。
• 簡単なオンラインサービスで、ロボットが職業をどのように置き換えることができるかがわかります 。
• おそらくディープラーニングを使用するColormindカラースキームジェネレーターは、2つの原色の補助色を提供します。
• フランク・チェンは、数年以内に、人工知能を使用するスタートアップの誇大広告は減少すると書いています。 これは、リレーショナルデータベースの使用またはモバイルアプリケーションの可用性として、必須と見なされます。
• アルゴリズム駆動型のYossarian Idea Generator-新鮮な思考や概念を見つけるのに役立ちます。
• Sketchploreの実験的設計ツールにより、レイアウトの構成を試すことができます。 クリエイターへのインタビュー 。
• UIzard実験的アルゴリズム設計ツール 。 宣言された機能の1つは、 静的な画面イメージからのHTML、Android、およびiOSでのレイアウトです。
• uKit Webサイトビルダーのアルゴリズム設計ツール 。 既存のサイトを分析し、そのプラットフォームで改善されたバージョンを提供します。
• EBayのElaine Leeは、現代の製品における人工知能の3つの使用について説明しています 。

アルゴリズム設計：ニュースレター

アルゴリズム設計に関するサイトを多数の新しい強力な例で更新し 、ニュースレターを開始しました（英語で月に1回半リリースされます）。 購読する :)



2017年の最新のメールデザイントレンド

ニュースレターの2017年のビジュアルトレンドの概要。







バーチャルリアリティ

• FacebookのGabriel Valdiviaは、ゲームおよびバーチャルリアリティのユーザーアバターカスタマイズインターフェイスへのアプローチを検討しています 。

メッセンジャーとボット

• Rafal Cymerysは、ボットが現在使用されている多くの状況でのボットの非効率性について書いています。

スマートな時計とブレスレット

• TomTom は、Intelと同様 、 ウェアラブルデバイスの送信を拒否します 。

タイムレスWebデザインとは何ですか？

Chris Coyierは、10年後に期限切れにならないサイトを作成できるかどうかについて、有名なデザイナーや開発者の意見を集めました。 それは興味深い議論であることが判明しました。

一般的および専門的な開発のため

デザイナー、製品マネージャー、アナリスト向けの電報チャネルの大規模なリスト

Alexey Ivanovは、デザイナー向けの電報チャンネルのリストを作成しました。







設計ポッドキャストのかなり包括的なコレクション

Ste Grainerは、デザインポッドキャストの適切な選択をまとめました。



デメンター-設計メンターを見つける

このプロジェクトは、初心者デザイナーのメンターを見つけるのに役立ちます。



ダニエル・ブルカ、Google Ventures：「デザインは現在Photoshop、スケッチ、またはコードで作成されていません」

Google VenturesのDaniel Burkaとのインタビューで、プロダクトデザイナーの役割についての彼のビジョンからの抜粋。



プロジェクトで唯一のUXデザイナーの場合の対処方法

社内で唯一のデザイナーである場合の対処方法に関するパネルディスカッション。



エンタープライズUX業界レポート2017-2018

UXPinは、大企業および中小企業の約3,000人のデザイナーを対象に、内部組織に関する調査を実施しました。 質問は場所によって奇妙です（たとえば、設計システムとパターンライブラリが混在している）が、興味深い結論があります。

業界の人々と企業

Ibm

• [enの唾液を拭く] IBM iX設計チームは、Moving Brandsにアイデンティティを注文しました 。

ニュースレターを購読する ！ 手紙は月に一度届きます。