👴🏼 ➰ 🚴🏿 フードデザインダイジェスト、2018年2月 🤹🏿 👩🏻‍🚀 🚲

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

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

UIデザインのハンドルバー

Shankar Balasubramanianは、比較的新しい「ハンドルバー」パターン（大まかに言うと「アーム」）を分析します。これは、隠されたジェスチャーベースのインターフェースによって促進されます（たとえば、iPhone Xには多数あります）。彼は、実験的なタッチインターフェースが長い間苦しんでいたことから、必要なアフォーダンスを追加します。

完璧なレスポンシブコンフィギュレーターの設計

Vitaliy Fridmanは例を解析し、オンラインストアで機器やその他の製品のコンフィギュレーターを設計するためのインテリジェントなチェックリストを提供します。いつものように、zvizdillionの例。

モーダル/オーバーレイ/ダイアログウィンドウのベストプラクティス

Naema Baskanderiによるポップアップを設計するための説明チェックリスト。 Jakob Nielsenの確認ダイアログを設計するための同様のチェックリスト。

CAREの紹介-ユーザーのオンボーディングのためのシンプルなフレームワーク

IntercomのRuairíGalavanは、新しいユーザーに会うための同社のアプローチについて説明しています。 Samuel Hulickのように、彼らは問題をいくつかのトレーニングメッセージよりも広範囲に見ます。ライフサイクル全体でクライアントを実施することが重要です（有料サブスクリプションに焦点を当てています）。

UXデザイナーのコピーツールキット

GEのMatt Jonesからサンプルのフロントエンドテキストを作成するためのヒント。

先生のようなデザイン

Aimee Gonzalez-Cameronは、一見デッドロック状態にあるデザイナーのために何をすべきかを示しています。ユーザーは、変更できないアフィリエイト製品のインターフェイスで部分的に作業することを強制されますが、それほど熱くはありません。彼女は、ユーザーがサードパーティのインターフェイスに切り替える前にユーザーの期待に焦点を当てており、これはロイヤルティを高めるのに大いに役立ちました。

花のウェブサイトのユーザーエクスペリエンス

ジェフ・サウロは、いくつかのアメリカの花配達サイトの比較テストを実施しました。 NPS値もあります（ところで、非常に低い）。

*平均NPS -2％

メーリングリスト

Really Good EmailsコレクションのキュレーターであるMatt Helbigは、いくつかの良い手紙を例に、高品質のメールをどのように選択するかを示しています。

Baymard Institute Research

Baymard InstituteのChristian Holstは、ユーザーに登録を依頼する価値があるときに、チェックアウトプロセスの適切なタイミングでオンラインストアにアドバイスします。

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

Yandexは、BEM用のプロトタイピングツールとテーマのセットを発売しました。設計システムのクイックスタートに適したテンプレートであることが判明しました-タスクのスタイルを再定義できます（これはManufacturaスタジオとAlfa-Bankプラットフォームの最初のバージョンによって行われました）。ミハイルコロスコフによるアプローチ全体と打ち上げのプレゼンテーションについての記事。一般に、BEMは国際社会で最も尊敬される国内の発展の1つです。昨年のClarity設計システムに関する会議で多数の人々が暖かくそれを思い出しました。「私たちのブートストラップ」が判明すれば素晴らしいことです。

このようなイニシアチブは、設計者の心を変えるのに役立ちます。設計者の多くは、設計が埋め込まれているコードのコンポーネントの技術的解決策ではなく、Sketchまたは別の設計ツールのテンプレートとして設計システムを理解しています。ブラッドフロストもこれにうんざりしています。これは、この言葉がブランドの視覚的識別のシステムとして理解され、美しい印刷された本が行き渡った前世紀の半ばの考え方です（最近活発に転載されました）。しかし、それは店舗の棚（または店舗のチェーン自体）にある物理的な製品とオブジェクトに関するものであり、ユーザーが起動する前にレイアウトが何も保証せず、何度も変更するデジタル製品を扱っています。したがって、この環境の主要な素材であるコードを操作する必要があります。

前回の号では、2つの世界（コードと設計ツールのコンポーネント）の間のブリッジについて言及しました。これは、今年の主要なトピックの1つです。したがって、Mark Dalgleishは、SEEKがReactのコンポーネントとSketchのテンプレートをリンクする方法について詳しく説明します（これらはライブガイドラインから組み立てられます）。これらのことを注意深く守って、自分で試してみてください。見かけよりも自宅で実装する方が簡単です。

さて、設計システムの作成に関するいくつかの新鮮な話：

Marcin Trederは、UX Pinインターフェースを整理するために使用した設計システムを形式化するための6日間のスプリントについて説明しています。確かに、ここでは、コードに多くの重要な実装の詳細がない、視覚言語のレベルについてのみです。
HubSpot Canvas Design System。ジュリー・ネルガラリアンは、それがどのように作成されたかについて語っています。
Nathan Curtisは、設計システムと技術ソリューション自体のサポートチームのための3つのアーキテクチャモデルについて説明しています。
Cristiano RastelliがBadooデートサービスデザインシステムの作成について語っています。最初の部分は問題文とアーキテクチャについてです。

iOS 11

Appleは開発者の要件を厳しくし、インターフェースを設計するための絵文字の使用を禁止しました。

Android

Daniel BolyhosによるPhotoshop用Google Pixelテンプレート。
Firebase分析システムを使用すると、ユーザーがアプリケーションを評価するのに最適な時期を予測できます。

ユーザーの理解

デイブ・グレイ-リミナール・シンキング

2016年の終わりに、Two Waves BooksはDave Grayの本「Liminal Thinking」を出版しました。 UXmattersは、信念の形成についての抜粋を公開しています。これは、ユーザー心理学の特徴をデザイナーによく示しています。

新しい技術の「中毒」はほとんどが古いモラルパニックです

新しい技術への愛着が問題または病気であるか、それがトレンドの特徴であり、過去においてすべてが同じように行われたかについての興味深い考え。

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

ワイヤーフロー

ブラウザでサイトマップを作成する別のツール。

コピードキュメントを使用して設計プロセスを改善する方法

DropboxのAndrea Drugayが、インターフェイステキストテンプレートを披露します。一般的に、特別なことは何もありません。テーブルの通常の仕様です。

キーロフの新しい診療所の設計

サービスの設計と無駄のない製造の原則を考慮した、キーロフのクリニックの再設計に関するストーリー。患者の行動と医師の仕事をどのように分析したかについての興味深い事実。

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

フェーズ

今年初の新しいフェーズインターフェース設計およびプロトタイプツール。アニメーション機能の標準セット、あらゆるキャラクターの作成、順応性、Webおよびネイティブプラットフォーム向けのコードへのエクスポート。

この市場での最後の3、4年の動きは非常に目立つようになったため、通常は大企業の雲に隠れているブルームバーグでさえそれについて書いています。市場の成熟度を示す優れた指標であり、デザイナーは6年前に常にPhotoshopに満足しなければならないと考えていました。これは、インターフェイスで研ぎ澄まされていない古い肩からの脱落です。これはお金でも明らかです。

インビジョン
2億3500万ドル

figma
4290万ドル

フレーマー
900万ドル

マーベル
800万ドル

ゼプリン
120万ドル

購入はありますが、これまでのところ部分的に成功しています-InVisionはエコシステムを強化し、GoogleはPixateとFormを腐敗させました。

世界はデザイナーが何を言っていようと愛しています。練習に戻ると、これは過去1か月半で起こったことです。

スケッチ：新鮮なプラグイン：選択したオブジェクトの周りにガイドをすばやく作成。インターフェース画面と単なる形状の等角投影ビューへの迅速な変換。 Sketch内のアニメーションのDiya 。記事：Tom Gebauerは、テーブルを操作するためのキャラクターの構成を示しています。 HudlのMichael Fouquetからのキャラクターのモダンライブラリーの作成に関するメモの翻訳。無料のテンプレートへのリンクの選択。
Adobe XD： 2月の更新：ベクターグラフィックス、仕様ジェネレーター、およびインターフェイスの単純化による作業の改善。その他のニュース：有名なデザイナーのアイコンセット -ランスワイマン、アントン＆アイリーン、ビューロデストラクト。 Kyle Galleとのディスカッション。プラグインの開発に関する質問に答えます。
InVision： Mazeは、InVisionプロトタイプに基づいたユーザビリティテストを支援します。ユーザーに特別なリンクを与えると、出力はヒートマップやタスク実行時間などの多くの有用な分析になります。
Haiku： 予備リリースが出ました。 Macアプリをダウンロードして、Webコンポーネントエンジンを見ることができます。
フレーマー：チームとデザイナーが実際にそれをどのように使用するかについての記事のセレクションがサイトに掲載され、9月には独自のルーペ会議が開催されます。 Greg Rogからインタラクティブなプロトタイプを作成し、 Meng Toの本「Design + Code」からの抜粋をFramerでの作業に関する部分とともに翻訳するためのステップバイステップガイド。
Zach Johnstonが、 Dropbox設計チームがFramerを使用してデスクトップアプリをプロトタイピングすることについて語っています。比較的忙しい本物のデスクトップのコンテキストでこれを行うことが重要です。
Lingo：複数のインターフェースが改善されたバージョン4がリリースされました。
PDFI.js：このスクリプトにより、PDFをコンポーネントに解析できます。それからPSDを作る方法。
Zeplin： プラグインを作成できるようになりました。

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

研究グリッドを使用して、研究の決定に焦点を当てる

ジェフ・サウロは、進行中に詳細に迷子にならないように、ユーザー調査の目標を常に覚えておくことをお勧めします。それは、研究の目的と基本的な仮説を記録するための形式を提供し、作業が進行するにつれて監視することができます。

UX Cinema-感情。気持ち。インタビュー

Alfa-BankのMaria Goncharovaが、調査に基づいてミニフィルムを公開することで、製品チームのユーザーに対する理解を深めています。

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

Enter The Dragon（Drop）-アクセシブルリストの並べ替え

Harris Schneidermanは、障害を持つ人々のアクセシビリティ要件を考慮して、Web上でドラッグアンドドロップリストを作成する方法を示しています。

新しいスクリプト

スクリプトを使用すると、カーソルの方向に応じてガイダンスの効果を作成できます。
テキストのグリッチプレゼンテーション用のJavaScriptライブラリ。
CSSでレイアウトを表示するためのiMacの実装。スクロールするとき-壮大な視差。
このスクリプトは、パーツに分割して画像を読み込む壮大なアニメーションを作成します。
アニメーション化されたグラデーションを使用したホバー効果。

SVGを使用する

Chromeのプラグインを使用すると、サイトからすべてのSVGグラフィックをすばやく保存できます。

Webタイポグラフィ

ClearleftのRichard RutterによるCSS可変フォントのカスタマイズに関する小さなチュートリアル。
Mark Otto が、インターフェイスでGitHubがシステムフォントに切り替え、特定のプラットフォームに適応した方法について説明します。これは、ロードされたフォントの制限（主にダウンロード速度）によって回避できない製品の一般的なソリューションの1つです。

指標とROI

ネットプロモータースコアは会社の成長を予測しますか？

ジェフサウロは、NPSが財務指標に与える影響（企業の収益とリピート購入）について貴重な調査レビューを行いました。明確な答えはありませんが、優れた批判的な見た目になりました。その後、彼は、航空会社の例を使用して、さまざまな指標（SATおよびNPS）で表されるユーザー満足度が会社の将来の利益に影響するかどうかについて、独自の調査を実施しました。一般に、接続があります。

NPSを超えて-SUS、NASA-TLX、およびタスクとユーザビリティテスト後の単一の簡単な質問で知覚されたユーザビリティを測定する

Nielsen / Norman GroupのPage Laubheimerの、ユーザーテスト中に回答者にインタビューするためのオプション-SUS、SEQ、NASA-TLXの仕組みに関する優れた簡潔なリマインダー。

UXの価値の測定

NomensaのTim Dixonが、デジタルインパクトフレームワーク（DIF）アプローチについて語ります。これにより、長期的な目標を持つ製品に取り組む際に特定のタスクと結果をリンクできます。彼には、経済、社会、プロセス、革新という4つの取り組みのポイントがあります。

UX戦略と管理

企業組織におけるUXのROIの測定、パート1

ADPイノベーションセンターのBurcu S. Bakioglu、Ben Basilan、JonDelina 'JD' Buckleyの企業ユーザー向け製品をアップグレードする際の戦略的思考の強力な例。主要なビジネスメトリックに関連付けられているフロントエンドメトリックを強調表示する優れた理解可能なアプローチを構築し、主要なユーザータスクを分析して比較することで、長期にわたる改善を追跡できます。最小限の水でこのような意味のある集中的なアプローチを見ることはめったにありません。

レベルアップ

ヘザーフィリップスは、デザイナーファンドとともに、デザインチームの成熟度を判断するためのアンケートを開始しました。優れたテンプレートですが、デザイン管理に関するものであり、製品の作業自体に非常に抽象的な影響を与えます。

有名なデザインチームの仕組み

予約： Kelly van der Veenは、NomNomサービスを使用してユーザーの洞察を集約するだけでなく、社内の製品チームの構造と相互作用について話します。そしてアンナ・エフィメンコ- 会社のユーザー調査が解決するタスクについて。
Facebook： Courtney Kaplanが、デザインチームの仕組みと、デザインチームのデザインマネージャーの役割について説明しています。

ミーティングvsメイキング

設計マネージャーのIBM Sandra Tiptonは、多数の会議のスケジュールについて設計者に助言します。重要で二次的なものを強調する方法、目標と関与に応じてそれらを減らす方法。

チームの相互作用

アフィニティダイアグラム-UXの結果とデザインのアイデアを共同で並べ替える

Nielsen / Norman GroupのKara Perniceが、さまざまな非構造化アイデアから親族関係チャートを作成する作業セッションを実施するための段階的な手順を説明します。

方法論、手順、標準

ファシリテーターのハンドブック-23のデザインスプリントのヒント

Jake Knappデザインスプリントの作者であるSprintは、ファシリテーターに多くのヒントを提供します。

事例

ビルダー向けのブランディング

Gibson Biddle（2005年から2010年までNetflixの製品担当副社長）は、このブランドの開発について話しました。ポジショニングから特定の値までの定義の説明モデル、および製品自体の段階的な進化について説明します-当然、会社の伝統的な実験を通して。これがこのトピックの専門家にとって非常に新しいものである可能性は低いですが、ブランドとインターフェイスおよびデジタルブランディングとの接続は、ますます多くのインターネット企業がビジネスとして成熟し、あらゆるレベルでユーザーと協力しようとする近年の最も重要なトピックの1つです。良い例は非常に少なく、そのような詳細なケースは金で一見の価値があります。

競合他社ではなく顧客に焦点を当てたことが、100万人の登録をもたらしました

Aytekin Tankは、JotFormオンラインフォームサービスの新機能の発売について話します。エンゲージメントを低下させないために、ユーザーにどのように展開したかを説明します。

物語

Windows 95のユーザーインターフェイスの設計

Kent Sullivanによる失われた1996年の記事が見つかりました。彼はWindows 95インターフェイスでの作業について語っています。これは、当時のアプローチがどれだけ進歩したかを示す貴重な資料です。現在は普通のように見えますが、25年前に単一の企業で使用されていました。たとえば、今やおなじみのマウスのダブルクリックに人々を慣れさせることがどのように難しかったかについて読むことは非常に興味深いです。 Windows 95は、史上最も重要なインターフェイスの1つであり、「すべての家庭へのコンピューター」という使命のおかげで、最も人気のあるユーザーがコンピューターにアクセスできるようになるまで、かつては困難を極めました。翻訳

最高のロシア人デザイナーによるデザインの世界史に関する無料オンラインコース

バン！バン！教育とYandexの出版社は、1918年から2018年まで、設計履歴に関する無料のオンラインコースを開始します。教師のリストには、強力な国内企業とデザイナーの半分が含まれています。 6月9日から開始します。

トレンド

モノをつなぐ-デザインを拡張して、システム、プラットフォーム、製品サービスエコロジーを含める

Hugh Dubberlyから、ここ数十年でデザインの役割とタスクがどのように変わったかについての強力な概要。この進化の証拠が重要な本や記事に言及していることは特に価値があります。

アルゴリズム設計

サンドラ・アップソンは、アルゴリズム生成コンテンツの時代の倫理について語っています。政治家による現実的なスピーチやレストランのレビューを作成する実験の急増を考えると、実際のイベントと架空のイベントを区別することはすぐに困難になります。
AdobeのScott Prevostが、アルゴリズム設計ツールのビジョンについて語ります。彼は、設計を完成させるためのアイデアを提供し、レイアウトでの作業を単純化し、結果の有効性を評価するために、それらが特に役立つ3つのタスクを特定します。
Michael Schrageは、アシスタントからボスまで、アルゴリズムとのユーザーインタラクションの5つのモデルについて説明しています。
uKitチームは、 Webサイトのデザインを自動的に再設計する新しいソリューションについて話します。
オートデスクのErin Bradnerは、工業デザインにおけるアルゴリズム設計について語っています。彼らはアプローチをジェネレーティブデザインと呼んでいますが、先進地域の開発の初期段階では常に用語の混乱があります。

費やされる時間の変化

Luke Wroblewskiは、一般的にも他のデバイスとの関係においても、近年、電話の使用がどれほど増えているかを示しています。

他のモバイル市場ニュースから：モバイル販売は中国で初めて低下しました。世界全体の市場成長率は低下していますが、これはその強力な減速のもう一つの鐘です。 Post-PCの支持者は何と言っているのだろうか。

カーインターフェース

自動車HMI設計（2018-2019）のセレクションと少しの歴史。

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

スマートウォッチとブレスレットへの関心が全般的に低下したことを背景に、 Withingsを買収したNokiaは問題を抱えています。
また、Fitbitには楽しい時間はありません。スマートブレスレット市場は2017年に18％縮小しましたが、少なくとも一部の生活はスマートウォッチに集中しています。

インターフェイスの簡素化

Snapchatは、シンプルなインターフェイスを徐々に展開しています。

音声インターフェース

AmazonのAngela Nguyenが、Alexaの音声アシスタントの設計のヒントを提供します。

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

フロントエンド-痛くない！

アレクサンダー・ベスポヤソフによるフロントエンド開発者向けの良いメモであり、製品デザイナーのマニフェストに近い精神です。製品チームのすべての参加者からこの方向に進むことが重要です。

スケッチして破壊する

Stephen Hay ― .

Solving Product Design Exercises — Interview Questions & Answers

, . :

Marcel van Remmerden Google.

DesignWorkout —

— . , Daily UI. Bang! バン！ Education .

会議議事録

Conference Review: O'Reilly Design Conference 2017

O'Reilly Design Conference 2017 20-22 -. Pabini Gabriel-Petit Krispian Emert - .

International Design in Government 2017

GOV.ukの愛好家チームが、州のウェブサイトの設計に関する最初の国際会議を開始します。International Design in Governmentカンファレンスは、7月17〜18日にロンドンで開催されます。

新鮮なリンクも同じ名前を追跡することができますFacebookのグループ、VKontakteを、メールで毎月受け取るか、電報で読み取ります。特にGennady Dragun、Pavel Skripkin、Dmitry Podluzhny、Anton Artemov、Denis Efremov、Alexei Kopylov、Taras Brizitsky、Evgeny Sokolov、Anton Oleinikのリンクを公開しているすべての人に感謝します。レビューのおかげで、それらのおかげでより多くの資料が表示されます。

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

フードデザインダイジェスト、2018年2月