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

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

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

Eコマースチェックアウトでのクレジットカード番号のテスト（虎の巻）

Andy Carterは、支払いフォームを検証するために、適切な選択のテストクレジットカードデータをまとめました。



メーリングリスト

• Stig Morten Myreは、レスポンシブなニュースレターメールを作成するための段階的なガイドを提供しています 。

オンボーディング

• Tidal音楽アプリでのオンボーディングの仕組み 。

ALTテキスト

• ShopifyのElizabeth Sahadeoからのヒント 。

プラットフォームと企業のガイドライン

Andrey Sundiev-設計システム：UIキットからライブガイドまで

私の同僚のアンドレイ・サンディエフは、Mail.Ru Groupの設計システムの現状について説明しました。 プレゼンテーションでは、変数を使用した作業、ライブガイドラインに関する現在の開発、および統一のその他の重要な側面について非常に詳しく説明しています。 来春までに、設計システムに関する詳細なストーリーの次のバージョンの資料が用意されます。







Shopifyの新しいイラストスタイルの構築

ShopifyのMeg Robichaudが、会社がどのように新しい統一スタイルのイラストとアイコンを作成し実装したかについて語っています。 非常に実用的なケースです。







パターンラボ2.0

フレームワークの2番目のバージョンがリリースされました。 Smashing Magazineの記事で、 クリエイターはアップデートについて詳しく説明しています 。 主な製品コードとの統合はまだ非常にスムーズではありませんが、多くの興味深いソリューション。 デモビルド 。







設計システムに関するその他のニュース：

• GE Predix設計システムに関する記事の翻訳 。
• Lucid SoftwareによるLucid Particle Design System 。 デザイナーがプロトタイピングに使用する方法。
• 米国政府のサイトの設計システムが更新されました 。

iOS 10

• iOS10でアクセシビリティがどのように改善されたかに関する優れたレビュー記事。

材料設計

• Rivalry社は、マテリアルデザインの作業に携わった別の外部スタジオです。 また、新しいGoogleロゴの作成にも協力しました 。

ユーザーの理解

でペルソナを最適化する

定性的および定量的研究に基づき、実際の作業で使用される、Optimizelyチームからキャラクターを作成する素晴らしい例です。







Vox製品のアクセシビリティガイドライン

Vox Mediaの障害者向けアクセシビリティの一般原則の優れたチェックリスト。 彼らはそれをオープンにしたいので、誰でも追加できます。







トピックに関するその他の資料：

• 生まれて目が見えないApple開発者、Jordyn Castorの物語 。
• アクセシブルなインターフェースの作成に関するOsmaniの追加 。 この記事は、手頃な価格のプロジェクトの開発に役立つリソースへのリンクを提供します。
• Shopifyの高良哲郎は、可用性の要件を満たす洗練されたテーブルの作成経験を共有しています 。

あなたのためにアプリを台無しにするUXシークレット

Fast Co.Designは、インターフェイスを意図的に遅くすることでユーザーに落ち着きをもたらす製品例をコンパイルしました。 要求の処理が速すぎると、システムが機能しなかったという懸念が生じます。



行うべき仕事

• クリス・シュピークは、個々の製品機能を分析するために行われる仕事をどのように使うかについて話します 。
• インターコムチームが使用するジョブストーリーテクニックについて 。 行うべき仕事は物理的な製品に対して提案されており、デジタル製品に対しては常にスムーズに進むとは限りません。

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

マイクロモーメント-モバイルマーケティングの成功ガイド

AICはGoogle Micro-Momentum Guideを翻訳しました。 プレゼンテーションとしても利用できます。







コンテンツファーストプロトタイピング

コンテンツプロトタイピングへの興味深いアプローチに関するAndy Fitzgeraldの記事の翻訳。 彼は、ExcelとJekyllの静的サイトジェネレーターをいくつかのテクノロジーレイヤーでセットアップしました。これにより、実際のコンテンツを含むインタラクティブなプロトタイプをすばやく取得し、更新が非常に簡単になりました。

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

Adobe XD

• 7月のベータ版では、 Sketch、PowerPoint、InDesignから要素をコピーしたり、PDFにエクスポートしたりできます。 プロトタイピングおよびスケーリングのシナリオのその他の機能。 翻訳
• マヌエラランゲラでは、Adobe XDでサムネイルを作成する作業について順を追って説明します。

Sketch 39がシンボルのサイズ変更とクラウドベータを実現

新しいバージョンでは、適応性を操作するための基礎が示されました。サイズ変更時にキャラクターが異なるロジックを持つことができます。 さらに、この更新プログラムは、インターネット上でレイアウトを公開するためのSketch Cloudの最初のバージョンを導入しました。 適応性の原則の 翻訳と説明 。







その他の素材とプラグイン：

• Anthony Colluraficiは、Sketch 39でアダプティブ列グリッドを組み立てる方法を示します 。これは、段階的に変更されます（たとえば、8px）。
• 仮想現実のレイアウトを提示する面白いプラグイン 。 著者からのいくつかの言葉 。
• 長浜徹とアンジーユアンマライのスケッチスターターガイド 。
• Prismプラグインは、アートボードの1つでドキュメントパレットを作成し、美しい人間の名前を付けます。
• Reony Tonneyckは、インテリジェントにストレッチするスプレッドシートの作成に関するヒントを提供します 。
• 個人の生産性とリスト管理の改善のためのフォーカスプラグイン 。
• Shaprプラグインを使用すると、ホットキーを使用してシェイプを作成できます 。

BotSociety.io-チャットボットスケッチツール。 ボットの会話のビデオを作成する

BotSocietyツールを使用すると、ダイアログをすばやく作成し、ボットとの相互作用を確認できます。 すべてはWebフォームを介して行われ、出力は作業のビデオです。



Axure RP 8

• Pierre Croftの新しいAxure 8の詳細な概要 。

MockupEditor.com-オンラインのモックアップシーンクリエーター

効果的なデザインのプレゼンテーションのための異常なサービス。 製品がデバイスに表示される典型的なオブジェクトからシーン全体を組み立てることができます。







Proto.io 6

楽器の第6世代が登場しました。 アニメーションの操作が簡素化され、多くの相互作用パターンが登場し、リモートユーザビリティテスト用の一連のツールが登場し、仕様の形式で画面を表示する機能が登場しました。







原理

• 原理に関するビデオコース 。

プロトタイプ作成ツールのレビューと比較

• Joe Salowitzは、特定のタスクにプロトタイピングツールを選択するためのアプローチを提供しています 。

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

IBMデザイン研究

IBMはユーザー調査マニュアルを公開しました。 同社の他の設計ガイドのように、アプローチ、原則、事例に関する有用な情報がたくさんあります。 確かに、特定のメソッドの説明はサードパーティのディレクトリを参照しています。







UX研究の回答者を選択する際の微妙さ

Natalia Sprogisは、UX研究の回答者を選択する際の微妙な点について詳細に説明しました。







テストユーザー数

回答者の数は、調査の正確性に対する期待によって決まります。 最小値があり、合理的な最適値があります。



インフォームドコンセントについてユーザー研究者が知っておくべきこと

David Travisは、回答者からユーザー調査の同意を得る方法に関するヒントを提供します。 何に署名し、何を言うだけか。



SUS（システムユーザビリティスケール）

• ジェフサウロはSUSが答えるのを助ける5つの質問をリストします 。

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

新しいスクリプト

• tracking.jsライブラリは、コンピュータビジョン技術の使用を促進します 。
• Barba.jsライブラリを使用すると、サイトのページ間でアニメーション化されたトランジションを作成でき、ナビゲーションがよりスムーズになります。 ルイージ・デ・ローザがそれがどのように機能するかを語る。
• モバイルで動画を自動再生するためのWhitewaterライブラリ。 どのように機能しますか？
• Chris Coyierは、現代のすべての標準を満たすダイアログボックスを作成する際の落とし穴について説明します。

Webタイポグラフィ

• Zach Leathermanは、Webフォントの読み込みを最適化する方法に関するスマートチュートリアルをまとめました 。

ウェブ上の色を操作する

• WebKitブログでは 、市場に徐々に登場する拡張カラープロファイル画面をすぐにサポートできるWebテクノロジーの将来について説明しています。

Svg

• スケーリング時にサムネイルのスタイルを保持する方法 。 サイズを変更しても、一部のSVG要素はそのまま残る場合があります。
• 障害のある人々にSVGをアクセス可能にする方法 。
• Michael Ngoが、SVGでアニメーションアートワークを作成する手順を説明します 。

適応性

• Ahmad Shadeedは、適応性が画面の幅だけでなく高さも考慮するいくつかの例を示しています 。

フレーマー

• iOSでプロトタイプを表示するためのアプリケーションがリリースされました 。 9.99ドルです。
• Facebookチームは、Framer用のスクリプト集を公開しています。

UX戦略と管理

信頼できる研究の設計-研究フレームワーク

Meena KothandaramanとZarla Ludinによるユーザー調査の計画とその価値のあるビジネスへの「販売」の優れたアプローチ。 彼らのモデルは、製品に関する4つの作業段階を提供します。各段階には、製品マネージャーと特定の方法に対する独自の価値があります。







トピックの続き：

• ジュリー・ジュオは、デザイナーがメトリックをどのように扱うかについて語っています 。
• Intercom Des Traynorは、製品の作業中に軽食に夢中にならないことの重要性について書いています 。 簡単に実行および実行できますが、チームの力を奪いながらユーザーや企業に大きな利益をもたらさないものがたくさんあります。

素晴らしい製品は事故で起こらない

Jon Laxは、彼のプレゼンテーションに基づいて記事を公開し、デザイナーの作業方法を体系化する興味深いアプローチを提供しています。 彼は、どんな状況でも常にゲームのセットを持っているアメリカンフットボールのコーチの例を挙げています。 これは、製品の作業プロセスに完全に適合しています。







製品設計の定義-Airbnbの設計責任者からの派遣

Airbnbのデザイン担当副社長であるAlex Schleifferが、会社でどのようにシステム化したかについて語っています。







トピックの続き：

• FanDuelスポーツアプリのデザインチームの仕組み 。
• Spotley DesignのディレクターであるStanley Woodは、デザインをスケーリングする方法について語っています 。 2つの主な柱は、設計システムと有能な品質管理システムです。 翻訳
• リチャードバンフィールドは、彼の著書「デザインリーダーシップ」から第1章を公開しました 。 「設計組織をリードする技術をマスターする」と呼ばれます。

Optimizelyのディスカバリーかんばん

製品チームが繰り返し形式で最適化する方法。 彼らはプロセスを2つの部分（問題の研究と生産）に分割し、設計と研究がアジャイル開発にうまく適合するようにしました。







Go Holistic-カスタマーエクスペリエンスを通じて組織の成熟度を評価する

Ger Joyce、Mindy Maxwell、Jay Brewer、Saurabh Duttaが、同社のカスタマーエクスペリエンス成熟度モデルについて語っています。







リアビューリーへのインタビュー

Forresterでの彼女の仕事について、Leah Buleyにインタビュー。 彼女は最近そこを去り、再び民間コンサルタントとして働いています。



データ駆動型設計組織になるための5つのベストプラクティス、パート3

Michelle Bacigalupiは、よく知られているが名前は付けられていない会議サービスでユーザーの調査と分析を行うための体系的なアプローチの導入について説明しています。 記事の3番目の部分は、プロセスと雇用に専念しています。

製品管理と分析

最小の貴重な問題

Scott Sehlhorstは、Minimum Viable Productではなく、Minimum Valuable Problemという用語で考えることを提案しています。 問題に対する十分に説明された最小限の解決策は、すでに最小限の十分な製品ですが、問題を半分だけ解決する初期バージョンの製品は有用性が限られています。

事例

ケースの再設計

• Jessie ChenがLyftのタクシー予約アプリケーションの再設計について語ります 。
• Pendar YousefiがGoogle AdWordsの再設計について語ります 。 翻訳
• Salesforceが主要なSales Cloud製品の1つを再編集し、アジャイルプロセスをセットアップする方法 。
• 新しいVSCOアプリケーションのナビゲーションの原則に関するストーリー 。

未承諾の再設計

• PatrykAdaśによるブラウザ履歴の興味深い概念 。 翻訳

物語

アートのアスペクト比-黄金よりも優れているものは何ですか？ プラスチックであるか、根ざしているか、それとも合理的か？ 古い対のアスペクト比の調査 現代絵画

ゴールデンセクションのプロポーションに従うかどうかに関する芸術作品の最もクールな研究。 簡単な答えはノーです。これは一般的なルールではありません。 翻訳







Y CombinatorのXerox Alto：伝説的な1970年代のGUIコンピューターの復元

Y Combinatorは、グラフィカルユーザーインターフェイスを備えた最初の商用製品である伝説のXerox Altoコンピューターを復元したいと考えています。 この記事には、製品およびGUI全般に関する非常に良い歴史があります。



素晴らしいアプリのタイムライン

Great Apps Timeline Webサイトでは、有名なモバイルアプリケーションのさまざまなデザインバージョンを収集しています。

トレンド

デザイナー向けの機械学習

O'Reillyのデザイナー向けのクールな無料レポート/機械学習のミニブック。 今年、このトピックは特に注目を集めており、設計者がこれらの技術の原理を理解することが重要です。







チャットボットの完全な初心者向けガイド

Matt Schlichtによるボット設計ガイド。 翻訳







トピックに関するその他の資料：

• 古典的なJacob Nielsenヒューリスティックをボットに適合させることに関するKevin Scottの記事の翻訳 。

VRのUIデザイン用テンプレート

KickpushのSam Applebeeによる仮想現実の設計原則







DesignX-複雑な社会技術システム

DesignXについてのドナルドノーマンとピーターヤンスタッパーズによる詳細な記事。 過去1年間の類似のタスクの用語と本質についての理解が深まりました。 記事の最後に、2015年12月に中国で開催されたこのトピックに関するセミナーの参加者との興味深い議論があります。 トピックの続き：

• IntercomのEmmet Connollyが同様の考えについて語っています。 現代のシステムはより複雑になっており、これにはデザイナーの新しいスキルが必要です。

カーインターフェース

• フォーミュラ1ドライバーがトラックで何が起こっているかをどのように見ているのかについての興味深い視線追跡調査 。 視線がどのように実行され、何で停止するか。

アルゴリズム設計

• アルゴリズムは、スケッチに基づいて写真を再作成することを学びました 。

2016年に見逃せない10の新しいデジタルヘルストレンド

VentureClash今年のデジタル医学の動向。 私たちにとって最も興味深いのは、第7です。UXの改善に特別な注意を払っています。 翻訳

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

4分のWebデザイン

Jeremy Thomasのデザインの基本に関するすばらしいシンプルなチュートリアル。 重要なメッセージを進めていくと、ページは裸のテキストからきれいにデザインされたものに変わります。







なぜそれほど多くのUXアナロジーなのか？

最近、「UXがGame of Thronesから学べること」の精神で、より多くの物議を醸す記事が公開されています。 ジム・ロスは、それらが有用であるかどうか、そしてなぜ人々がそんなにそれらを愛しているのかについて話します。







UXでのキャリア-さまざまな組織がユーザーエクスペリエンスデザインにアプローチする方法

Laith Ulabyは、4種類の企業におけるデザイナーの仕事の長所と短所を非常に簡潔に説明しています。 製品会社、代理店、スタートアップ、サードパーティのIT組織。

業界の人々と企業

Instacartデザイン

Instacart Design Teamブログ。



Facebookデザイン批評の内部

Facebookの設計チームは、サードパーティのプロジェクトにフィードバックを提供するイニシアチブの一環として、批判セッションの1つのトランスクリプトを公開しています。



400人のデザイナーに関するジョーク

• 「ちょっとした小さな修正」を紹介する顧客からの手紙に対する皮肉 。 記事には、このスタイルのクライアントとデザイナーの間の通信の面白い年代記があります。

会議議事録

英国のMail.Ruグループチームによる製品設計集中

Mail.Ru Groupの設計者が監督した英国の製品設計の強度に関する詳細なレポート。 ここでは、私たちのチームが読んだすべてのプレゼンテーションと、学生が作成したトレーニングプロジェクトを収集します。







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



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