フードデザインダイジェスト、2015年11月

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

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

Josh Clark-タッチ用の設計

Josh Clarkは、数週間前にA Book Apartの新しい本Designing for Touchをリリースしました。 ユーザーがデバイスを保持する方法に関する章の1つは、A List Apartにあります。 Steven HooberとLuke Wroblewskiはこのテーマについて多くのことを書いていますが、ここではすべてが1つの資料にまとめられています。







航空会社のウェブサイトの状態2015-教訓

Joshua Johnsonは、20の航空会社のWebサイトを解析して、インターフェイスパターンを調べています。 ホームページ、検索、予約。







フラットデザインへの長期的な露出-トレンドによりユーザーの効率が低下する仕組み

Kate Meyerが、NN / gのフラットデザインインターフェイスの長期的な研究について語っています。 そのようなスタイルはしばしばアフォルダンを殺し、製品との作業を複雑にするという恐怖に対する多くの具体的な答え。 若いユーザーは実際にこれに関する問題が少なく、デザインを探求する意欲がありますが、快適ささえ増しません。







設計原則：適切なパターンの選択

パターンを有意義に使用することの重要性について、Gustavs Cirulis氏。 彼は、ナビゲーションソリューションを比較し、特定の状況で試したインターコムの経験から例を挙げています。







ロシア企業が適応しているサイト-オンラインストア、サービス、デジタル代理店

ADN Digital Studioは、モバイルでの国内オンラインストアの調査を実施しました。 モバイル版とアプリケーションを持っている人。



インターフェース状態

• Vince Speelmanは、設計時に考慮すべき9つのインターフェース状態をリストしています 。

モバイルインラインフォーム検証

3年前、Steven Hoober は、モバイルインターフェイスでフォームを検証する方法を詳細に説明しました。 3年後、エラーメッセージはアンチパターンであり、問​​題をまったく伝えないほうがよいと彼は言います。 2012年の記事の執筆以来、彼は実質的にそこに記載されているパターンを使用しませんでした。







郵送

• Twitterがニュースレターでどのように機能するかについて少し 。

Baymard Institute Research

• モバイルオンラインストアのカテゴリーによる検索とナビゲーションメカニズムの研究 。

オンボーディング

• onboardX、ツールヒントをインターフェイスに追加するための別のサービス 。
• ホッパーアプリがどのようにオンボーディングをリメイクしたかの物語のロシア語訳 。

モバイルパターン

• Thierry Meierは、モバイルのソートおよびフィルタリングパターンを解析します。
• Zoltan Kollinは、モバイルアプリケーションの問題のあるパターンをリストしています 。 隠されたナビゲーション、署名のないアイコン、余裕のないジェスチャー、無用なトレーニング画面、思いがけない空白の画面。

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

iOS 9

• Meng ToのiOS9ガイドラインのハイライトの包括的な概要 。

材料設計

• Joe Birchによるマテリアルデザインのアニメーションのコードの基本原則の最もエレガントな分析 。 標準的な手段でできること。

Apple TV

• 新しいApple TVの設計経験に関するBen Hershの最も役立つ記事 。 彼はこれがスマートフォンではないことを繰り返し繰り返し、テレビでそのパターンとインターフェイスソリューションを繰り返す必要はありません。

アップルウォッチ

• RamotionのPhotoshop用のベクターテンプレート 。

iPhone 6

• RamotionのPhotoshop用のベクターテンプレート 。

Android Phoneテンプレート

• PSDのYotaPhone 2テンプレート 。

ユーザーの理解

タブレットではなくスマートフォンに夢中になっている理由

タブレットとは異なり、スマートフォンがより多くのパーソナルデバイスとして認識される理由について、ClickTaleのLiraz Margalitによる興味深い計算。 単に頻繁に使用されるという事実に加えて、心理的な執着もあります。



スモールビジネスオーナーとのユーザー調査-ベストプラクティスと考慮事項

チェルシー・グラッソンとエイダン・ブライアントが中小企業の研究を行っています。 これらの人々は常に忙しく、ツールを要求しているので、彼らと働く多くの特徴があります。



共感カード

• Paul Boagの共感マップのバリエーション 。

インターフェース速度

• インターフェースの速度に関するデニスミシュノフの記事の第2部 。 彼は、知覚の機能と、アクティブな待機、コールドスタート、およびダウンロードの擬似完了を使用して、製品の目に見える作業を高速化する方法について話しています。

キャラクター

• キャラクターをチームと顧客に適切に描写する方法に関するSalesForceのMabel Chan 。 ほぼ同じ研究結果は、同僚間でまったく異なる需要があったためです。

殺すインターフェース

• iPadのパイロット用に設計が不十分なインターフェイスは、カンタス航空をほぼ溝に落としました 。 パイロットは、太い指のために高さを示すときに逃したため、飛行機は離陸時に誤ったパラメーターのためにストリップで尾を打った。

子供向けのデザイン。

• ジョナサン・エヴァンスは、あらゆる年齢の子供向けの設計ガイドラインを説明し、実際の製品でそれらを試す方法の例を示します 。

アクセシビリティ

• アクセシビリティ原則について従業員を訓練する大規模なインターネット会社とアメリカの大学のイニシアチブ 。
• Facebookは新しい従業員イニシアチブ、2G火曜日を開始しました 。 従業員は、インドでインターネットの速度が遅くて悪い製品を使用する方法を理解できます。 このために特別なwi-fiネットワークがあります。
• Tinderのおかげで、大人気のスワイプジェスチャーにはアクセシビリティに関する問題があります 。 モバイルプラットフォームのいくつかのシステムジェスチャを使用します。

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

ユースケースとは何ですか、なぜ必要なのですか？

アンナ・アブラモワは、ユーザーとプログラムの相互作用を設計するための最高のテクニックの1つについて語っています。

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

スケッチ3.4

Sketch 3.4がリリースされました（革新と修正の大きなリストです）。 Yap Kwang Yik は最も興味深い改善をレビューしました 。







確かに、バージョンはバグがあることが判明し、ボヘミアンコーディングはすぐにアップデート3.4.1をリリースし、その後3.4.2をリリースする必要がありました。 このすべての結果として、開発者はAppStoreを離れることにしました 。 アプリケーションは、Bohemian Coding Webサイトから配布および更新されます。 その他の資料：

• Meng Toのホットキーに適した視覚的なチートシート 。
• iOSの精神で自動アダプティブレイアウトを作成できるようにするFluidプラグイン 。
• Meng ToのSketch 3を操作するための強力なリファレンス 。

Adobe Photoshop CC 2015

• Photoshop CC 2015の11月の更新 。 アートボードの改善、SVGへのエクスポート、タッチインターフェイスの開発、Creative Cloudライブラリ。

Adobe Project Comet-ユーザーエクスペリエンス、プロトタイピング、デザインアプリ

• ツールの作成について 。
• Designer Newsの製品チームとのAMA 。

6つの簡単なステップでより良いアイコンデザイン

IconFinderのScott Lewisから高品質の絵文字/アイコンを作成するための優れたシンプルなルールのセット。 フォローアップ：

• 材料設計におけるアイコンの一貫性の問題 。

Animaticons-アニメーションGIFアイコン

Animaticonsプロジェクトの作成者は、流行の形式の傾向に逆らい、GIFのカスタムアニメーションアイコンのライブラリを立ち上げました。 あまり未来に優しいわけではありませんが、安くて陽気です。 フォローアップ：

• Sara Souiedanは、SVGとGIFのアニメーションの長所と短所を詳細に比較します 。 もちろん、古いブラウザーでのサポートを除いて、GIFは失われます。

Tシャツ、タンクトップ、衣類のモックアップ

BreeziのPlaceItオンラインサービスを使用すると、衣服のプリントをすばやく安価に試すことができます。 レイアウトのセットは常に更新されており、現在では数十の優れたテンプレートがあります。



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

• Tes Matツールレビューの2つの部分の翻訳： Proto.io、Pixate、Origami、Framer、FormおよびPrinciple、Flinto for Mac、Tumult Hype 。

フロイド

• ウクライナのスタジオYalantisのメンバーによる楽器の小さなレビュー 。

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

10ユーザー調査の神話と誤解

Jim Rossは、ユーザーテストに関する神話と誤解に反論します。



酔ってUXについて学んだ10のこと

リチャードリッタウアーは250ドルで酔っ払った状態のサイトをチェックします 。 彼は、飲酒しながらデザインをテストしながら学んだことについて話しました。







UserZoomのCEO、アルフォンソ・デ・ラ・ヌエズへのインタビュー

最古のUserZoomリモートユーザーリサーチサービスのCEOへのインタビューで、3400万ドルという見事な投資を受けました。







ナビゲーションを改善するための適切な方法の選択

ジェフサウロの優れたナビゲーションテストガイド。 ユーザー調査で特定の質問に答えることができます。



A / Bテスト

• A / Bテストの経験に関するCraig Sullivan：喜びから失望、そして最終的に適切な使用までの長い道のり 。
• 会社が新機能の発売をどのように仮定し、それらをテストしたかについてのSpotifyのChris Johnsonによる強力なプレゼンテーション 。

アンケート

• 使いやすさを測定するための調査の使用方法に関するジェフ・サウロ 。

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

ライブガイドラインとコンポーネントシステム

• eBayは、独自のCSSフレームワークを発表する準備をしています。 彼らは、彼がどのように考慮し、アクセシビリティの有能な実装を管理するかについて話しました。
• プロトタイプでの実際のデータの使用に関するBrad Frost 。 これらの機能は、Pattern Labフレームワークに徐々に登場しています。
• セマンティックに色を扱うことがいかに重要であるかについてThoughtBot 。
• 既存の製品のパターンを整理する作業セッションの実施方法に関するネイサン・カーティス。 そして、 シャーロット・ジャクソンからの同様の記事 。

Envato Sites-Envato＆ThemeForestによるEnvato Sites Website Builder

Envatoは、テーマフォレストと協力してサイトビルダーEnvato Sitesを立ち上げました。 これで、さまざまな無料のテーマをすべて手作業でねじ込む必要がなくなります。 打ち上げについてもう少し。



Webタイポグラフィ

• Jakob Nielsenが、読みやすさ、読みやすさ、わかりやすさについて製品のテキストをテストする方法について説明しています 。
• Marcin Wicharyは、現在のユーザープラットフォームのコアフォントを使用して実験を行っているMediumについて語っています 。 もちろん、これはダウンロード速度を向上させますが、慎重に行うのはそれほど簡単ではありません。
• 行ごとにテキストマーカーを選択するCSSコード 。
• Webを含む最も古いフォントレンタルサービスの1つであるFontdeckが閉鎖されます。
• ロビンレンドルのウェブ上の適応型およびパラメトリックタイポグラフィに関する良い考え 。

CSSアニメーション

• 素材設計の精神で、「オブジェクトを平面上に持ち上げる」アニメーションをきちんとソフトにする方法 。

フォントアイコン

• Tyler Stickaは、SVGを優先してアイコンフォントを放棄することを推奨しています 。 ベクターグラフィックスに切り替えるときは一時的な松葉杖でしたが、アクセシビリティに関して多くの問題があり、特定のブラウザーで動作します。

SVGを使用する

• MacOSで新しいSafariのアイコンを準備する方法に関するIconFactory 。
• グラフィックをSVGにエクスポートする際のSara Souiedanからの説明。 構造とコードを最適化する方法 。

フレックスボックス

• Dennis Gaebel Jrは、デザイナーにとってのflexboxの利点に関するレビュー記事を作成しました 。

CSSブレンドモード

• CSSを使用して写真フィルターを再現する方法に関する一連の記事 。

BootstrapとFoundationの使用

• Foundation 6フレームワークの新しいバージョンがリリースされました 。 Zurbブログでは、イノベーションについて説明しています（パッケージには、最近発表されたMotion UIアニメーションライブラリが含まれています）。

フレーマー

• フレーマーは仮想現実のプロトタイプを作成できるようになりました 。
• SVGをアニメーション化する方法 。
• Basecamp 3での作業で、以前の37 SignalsがFramerを使用した方法 。

Webflow

• 製品の共同設立者であるVlad MagdalenからのWebflow CMSの発売の発表 。

アイコンの問題を修正した方法

Bobby Graceによる、会社がインターフェース内のアイコンを使用してどのようにシステム化したかに関するTrebloの記事の翻訳。



新しいスクリプト

• WebGLに対する雨の影響 。
• クレイジーインターフェースアニメーションの魔法使いオレグソロムカは、彼女のためにモーションJSライブラリを作成しました 。
• 新しいApple TVの音量視差効果からのインスピレーションの波は、オリジナルのシミュレーションを超えるものでした。 オンラインストア向けのメアリールーのスクリプトを使用すると、体積視差の効果でインテリアに製品を表示できます。
• アニメーション化されたマルチレベルの垂直メニューのスクリプト 。
• 線を再配置してバーガーアイコンを矢印に、またはその逆に変換しても誰も驚かないので、先に進みましょう 。 ルイスマヌエルのスクリプトは、これに追加の特殊効果を加えています。

UX戦略と管理

デザインリーダー

• 現代のデザインリーダーの要件に関する優れた資料 。 3M、Intuit、Microsoft、Pepsico、Philips、およびReiのデザインヘッドおよび主要幹部の意見。

デザイン文化の構築

• ダンブラウンは、効果的な設計チームの原則に関する2012年の本からの抜粋を更新しました 。

UX戦略

• 企業およびチームの成熟度レベルを記述するためのGridMarkサービス 。 それほどグラフィックではありませんが、まずはシステム化が良いです。

デザイナーを雇う方法

• アンディバッドデザイナーを雇う正しいアプローチについて 。 要件とスキルのリストから、対処する必要のあるタスクと問題の説明に移行することが重要です。

製品管理と分析

製品を作成するときにキーワードが「いいえ」なのはなぜですか？

オレグ・ヤクベンコフはインターコムの論文を翻訳し、さらにインターコムからのヒントの別の選択を追加しました。



成長ハッキングはでたらめです

メトリックのシステムを調べて、小さな小さなタスクと大きな戦略のバランスを見つける価値がある理由について。 そして、「銀の弾丸」の存在を信じないでください。







気持ちに夢中

製品要件と経験の違いに関するStephen P. Andersonのプレゼンテーション。

方法論、手順、標準

全体を持たない部品-デザイン思考は組織で何になりますか？

これは、デザイン思考チームが、大企業とそれほど大企業ではないデザイン思考の実践について、400人の実践的なデザイナーとマネージャーを対象に調査を実施したものです。 実際、彼らは洞察を含む電子書籍/レポートをリリースしました。

事例

正方形を解放するIBMの設計中心の戦略

IBMがどのように設計に注意を喚起し、1000人のデザイナーを雇う必要性を思いついたかについての大規模でかなり詳細な説明。 購入した会社のLombardi Softwareと一緒に、CEOのVirginia Romettyの承認を得て来たPhil Gilbertの物語は、デザイン思考の実践を導入し、デザイン文化全体を強化し、人々を大規模に採用し始めました。 映像







ケースの再設計

• Google Primerアプリケーススタディの翻訳 。
• ホッパーデザインチームからの別の小さな話 。 予約プロセスを大幅に簡素化して、手順を追加し直す必要がありました。
• Raven YuはBindo POS 3.0支払い端末インターフェースの作業をしています 。
• Facebookのイベントセクションを再考することに関する有線 。
• SwiftKey for Androidの再設計に関するストーリー 。
• ジャイロスコープスポーツアプリでの作業の説明ストーリー 。 アナンド・シャルマは、昨年の作業の開始についてすでに書いています。
• ケーススタディクラブ、ケースの別のコレクション 。

究極のeコマースCRO＆UXケーススタディ-RS Components

サイト変換を改善するための体系的なアプローチの良い例です。 問題の定式化から、サイトコンポーネントの大規模なセットでの個々の作業まで。



そして、オンラインストアに関するもう一つのケース 。 このストーリーで最も興味深いのは、カタログの画像を変更するとCTRが15.9％増加した2番目の実験です。 コンテンツのみを使用して作業すると、パフォーマンスが大幅に向上するという事実の追加例です。 コンテンツの最適化は、ますます重要なトピックになりつつあります。



未承諾の再設計

• 元Facebookデザイナーからのかなり面白いWealthfrontアプリ再設計ケース 。

トレンド

エンタープライズソフトウェアデザイン-武器の呼びかけ

Tom Hobbsによる、コンシューマーアプリケーションインターフェイスが快適で人道的になった方法、およびエンタープライズソフトウェアに同じ変換を開始する方法についての非常に優れた哲学記事。 体系的で、深く、刺激的。







カーインターフェース

• ユタ大学の研究では、音声インターフェースも完全に安全ではないことが示唆されています 。 それらとの相互作用は、最大27秒間ドライバーの注意をそらす可能性があります。

バーチャルリアリティ

• Block Interval Studioは、仮想現実インターフェースで作業する際のケーブルの使いやすさについて書いています 。 ユーザーが混乱しないようにする方法。 一般的に、彼らはブログのトピックに関する多くの賢明な出版物を持っています。 たとえば、オーディオデザインの重要性や、 強すぎる感情を誘発することが危険かどうか。

メディアトレンド

• NYT LabsのAlexis Lloydは、メディア出版の未来について考えています。 現在、FacebookとAppleが独自の形式を使用して出版物からのトラフィックを促進するかどうかについて多くのノイズがありますが、これらの形式はそれ自体では時代遅れです。 彼は、アトミックコンテンツとウィキペディアの仕組みを調べることを提案しています。

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

ういでお

Andrey Yakushevは、会議からのビデオアグリゲータに英語版のプレゼンテーションを含む国際版を追加しました。







Tilda Education：デジタル環境向けの設計

Tilda Publishingチームは、デザインスクールで最初のオンラインコースを開始しました。







東京オリンピックの視覚的アイデンティティについて本当に懸念すべき理由

Ian Lynamによるモダンデザインの哲学に関する強力な資料。 彼はオリンピックのアイデンティティの2つのストーリー（メキシコシティ'68とミュンヘン'72）を国際的なイベントの規模での視覚的言語に関する体系的な作業の例として解析し、3ペニーの魂のないクラウドファンディングを象徴する東京2020年頃の失敗したプロセスと比較します。 インターフェースに関するものではありませんが、あらゆる設計アプリケーションに適用され、デジタル製品にも影響します。







エルゴノミストNo 42、2015年11月

新鮮な数字が出ました。 Alexey Kopylovは、このジャーナルで言及されている記事を強調し、ユーザーのEEGの分析に基づく客観的ユーザビリティテストによるUI変換の増加。



私たち全員が仕様の創造的なピッチを捨てる時間

Zulu Alpha Kiloスタジオの#SayNoToSpecイニシアチブ。入札およびテスト作業への参加を拒否することを推奨しています。 Zak Mrouehは、スタジオがポリシーを変更した5つの問題をリストしています。 彼らは このテーマについて優れたビデオ を記録し ました -彼らはもちろんショックを受けた他の業界の代表者に同じことを要求しようとしました。







関連性は心の状態です

EightShapesのDan Brownは、関連性を保つために、より成熟したUXプロフェッショナルをどうするか、そして実際に10年前から存在している「新しい方法論」について熱望して息を吐いたときに怒らないようにする方法について考えています。 彼は、幅広い専門的経験を活用して、メンタリングに移行することを勧めています。



Jarrod Drysdale-私のデザイナーは私に夢中にさせている！

Jarrod Drysdaleの「マイデザイナーは私を夢中にさせています！」クライアントやマネージャー向けの本で、デザイナーと仕事をする方法を教えています。 ビデオコースやメーリングリストなどの代替形式で利用できます。







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

• Twitterスタートアップデザイナー 。
• Anton Molodtsovによるクライアントとデザイナーに関する30のことわざ 。

Facebookデザイン

• ジャスミン・フリードルは、小さな仕事や問題はないという 。

業界の人々と企業

Appleがデザインに悪い名前を与えている方法

70年代から90年代のアップルの伝説的なデザイナー、ドンノーマンとブルーストニャッツィーニが、アップルのインターフェースデザインの現状について語ります。 プロセスが現在の状態に達した方法と理由について。 その過程で、Googleを取得します。 ドンとトグは長い間そのような強力な告発をしませんでした。







AMAセッション

• Ethan Marcotte、レスポンシブデザインの普及 。

デザイナーの予定

• Huaweiは、Appleの元クリエイティブディレクターであるAbigail Sarah Brodyを雇いました 。

会議議事録

Google SPAN 2015：ニューヨークとロンドン

昨年、Googleは最初のFORMデザイン会議を開催しました。この会議は現在、ニューヨークとロンドンの2つの都市でSPANと呼ばれています。







結果によると、 スピーカーの出版物を含む書籍SPAN Readerが発行されています（これらは、記事の最後にあるリンクでWeb上で入手できます）。 最新のプロトタイピングツールと堅固な製品設計に関するパネルディスカッションのビデオなど、その他の資料が発表されました 。



どういうわけか私はロンドン部への招待状を受け取りましたが、私は応募しませんでした。 そこから既にビデオ録画を公開しています。 私はそこにいたので、 プロトタイピングツールに関するパネルディスカッション 、 手動生成デザインに関するLuna Maurerによるスピーチ、 仮想現実に関するKen Wongをご覧になることをお勧めします。 また、機械的生成デザインについてのDavide Fornari氏 -落ち着いてピッチで話していますが、ストーリー自体は爆弾です。























O'Reilly Design Conference 2016

O'Reillyは、デザイン会議であるO'Reilly Design Conferenceを開始しました。 米国サンフランシスコで1月19〜22日に開催されます。 構成と形式は、最も強力なものの1つであることが約束されています。 彼女の責任者であるメアリー・トレセラーは、UXMattersとの詳細なインタビューを行います。







RSD4-システム思考と設計の関連付け

2015年9月1〜3日、カナダのバンフで、Relating Systems Thinking and Design会議が開催され、 設計が解決できる複雑なシステム問題に専念しました。 一部のビデオ資料はすでに利用可能です 。 残りはチャンネルに表示されます 。







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

ニュースレターを購読する

手紙は月に一度届きます。