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

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

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

無限スクロールvs. ページネーション

ニコライ・バビッチは、無限のロードとページングの長所と短所について説明しています。







Baymard Institute Research

• 製品の色を検索クエリと検索結果に組み込む方法に関するクリスチャンホルスト 。
• Jamie Appleseedは、検索結果に表示する製品の特性について説明しています 。 特定のカテゴリの一般的なカテゴリと特定のカテゴリを分離し、各カテゴリでの作業に関するアドバイスを提供します。

UIの相互作用

アニメーションの別のコレクション。



暗いパターン

• ニューヨークタイムズはハリーブリグヌルと彼の暗いパターンについて書いた 。

12の国内店舗は製品リストとどのように連携しますか？

Dmitry Safronovは、フィルター、ページネーション、リストビュー、およびソートメカニズムを比較しました。 2番目の部分は問題の商品の発表を比較します。

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

Google I / O 2016

Google I / O 2016年次会議は18〜20日に開催され、Googleデザインチームは、デザインに関連するすべてのGoogle I / Oセッションを強調しました 。 ガイドラインの更新はすぐに表示されます。 最も興味深いのは次のとおりです。

• アニメーション このジャンルの最高の例の1つである基本原則は、不必要な詳細なしで非常によく説明されています。
• 新しいユーザーに会います 。 非常にクールで正確に説明された方法で、アプリケーションが何をするのか、どのように作業するのかについて話すことができます。
• 時計のガイドラインが更新されました 。

Android Nについての情報はそのかなり前に登場しましたが、ここに興味深い発表がいくつかあります。

• 今年、インスタントアプリはAndroidに表示されます 。これは、 ダウンロードせずにアプリケーションを起動する機能です。 モバイルサイトとアプリケーションの間に何かがあります。これは、美術館のアシスタントのようなめったに必要とされないものに適しています。
• 高度に再設計されたAndroid Wear 2.0は今年リリースされます。 カードの新しい表示スタイルと通知の動作原理、電話なしでのバッテリー寿命の改善、フィットネス機能の開発。 奇妙なことに、キーボードですが、彼女はGoogle Inboxからの迅速な回答を使用しようとします。 ビデオレビュー 。
• Android Autoは、通常の電話アプリケーションとして機能します 。 Googleは自動車システムの管理も試みていますが、自動車メーカーは実際にMODを望んでおらず、アドインが深く入らないようにしています。 フィアットクライスラーは自動操縦の開発を節約し、Googleテクノロジーを使用することを決定しましたが、協力に同意した最初の大企業です。
• GoogleとLevi'sは、サイクリスト向けの最初のProject Jacquardベースのアパレルジャケットを発売します。 この記事は、アイデアの実際的な実装の難しさについて少し説明しています。
• 次世代のGoogle CardboardはDaydreamと呼ばれます。 このイニシアチブには一度にいくつかのことが含まれます-バーチャルリアリティを備えた携帯電話の操作を最適化する特別なAndroid Nモード。 ギアラVRのヘルメット; 任天堂Wiimoteスタイルのコントローラー Google Playの特別セクション、およびYouTubeの最適化バージョン。 彼らがそれにどのように取り組んだかの物語 。

ビンテージグラフィック標準マニュアルのありそうもない復活

Meg Millerは、伝説的なブランドブックとデザインガイドラインの再発行の現在の傾向について説明しています。 過去1年半にわたって、NASA、ニューヨークの地下鉄のガイドが再リリースされ、ブリティッシュレールと一連のコレクションがリリースされようとしています。 彼らはコーポレートアイデンティティの黄金時代から来ており、彼らが現在電子形式で利用可能であるという事実にもかかわらず、彼らに対するデザイナーの態度は特別です。







1987年からのAppleのヒューマンインターフェイスガイドラインの再発見

Bryant Hodsonは、1987年のMacintosh II用Appleインターフェイスガイドを読みました。 彼は彼らから引用し、彼らは非常に近代的に見えます。



視覚言語の構築

Airbnb設計チームがDLS設計システムの基礎となる視覚言語にどのように取り組んだかについてのKarri Saarinenによる物語。 彼とAMA 。







設計システムに関するその他の資料：

• BEM Webサイトが更新されました 。 プレゼンテーションがより視覚的なものに変更され、多くの有用な情報が追加されました。
• Marek Minorによる記事の翻訳。彼は 、設計システムで変数やコンポーネントを整理することに精神的に非常に類似したレイアウトでワークフローを整理することについてアドバイスしています 。
• ネイサンカーティスによるデザインシステムの色の記述方法に関するヒントを提供する記事の翻訳 。
• ジェフクロスマンはGeneral Electric Predix設計システムについて話します 。 彼らは自分たちの仕事に合うように原子設計のイデオロギーを再考し、それを抽象的ではなくなった。 昨年、 Dave Croninはこのトピックについて話しました 。
• Fractalの設計システムを開発しているClearleftのMark Perkinsは、それらを作成する際の会社の原則について語っています 。
• アメリカウェブサイトデザインシステムジョブズ 。
• MS Officeファブリックコンポーネントライブラリ 。
• 7日目のアドベンティストALPSシステム設計 。 作業に関するブログ 。 それが本当の伝道者のいるところです！ それに取り組んでいるダニエル・モールは、アイデアがどのように組織に売られたかについて話しています 。
• ミズーリ大学の設計システム 。
• Marvelのプロトタイピング用の設計システムツール 。
• バージョン化された設計システムの編成方法に関するOptimizely Daniel O'Connorの素晴らしいアイデア 。
• Sonosのスーツデザインシステムに関するストーリー 。
• 英国政府のサイトが、設計システムに基づいてプロトタイプのバージョン管理をどのように組織したか 。
• スティーブンランバートがFamilySearchのライブガイドラインをどのように公開したかについての素晴らしいストーリー 。 プロセスの多くの有用な技術的詳細とニュアンス。
• 障害のあるユーザーがWebコンポーネントにアクセスできるようにする方法に関するArtyom Tabalinの優れたリマインダー 。

Android Phoneテンプレート

• Ramotion PSDのHTC One A9のテンプレート 。

ユーザーの理解

エクスペリエンスとカスタマーエクスペリエンスの違いは何ですか？

Ted Karczewskiは非常に興味深い研究を実施しました-「経験」と「顧客体験」の概念を人々がどのように説明するかを比較しました。 最初の人はより個人的で、数人を含み、永遠に記憶に残り、2番目の人はより実用的であり、語り手のみに関係していることが判明しました。







使い古した時間のための設計

近年、心理的トリックのトピックに関する多くの記事があります。これらの記事は、ユーザーが製品をより積極的に活用するために使用できます。 元Googleテクノロジー倫理のスペシャリストであるTristan Harrisは、こうした慣行を避けるために、Design for Time Well Spentを立ち上げました。 トピックに関する彼の記事 。 翻訳







アプリアイコンの時代のデザイン

Kelsey Campbell-Dollaghanは、アプリケーションアイコンの認識に影響する多くの理論計算を提供します。 もちろん、すべてが新しいInstagramアプリアイコンを中心に展開します。



ブランド名の音が重要な理由

Fast Co Designは、ブランド名の発音が消費者の認識にどのように影響するかについて書いています。



メンタルモデルとユーザーエクスペリエンス

メンタルモデルに関連する基本概念の概要。



アクセシビリティ

• Jaime CaballeroのWebサービスのアクセシビリティを向上させる非常に簡単なチェックリスト 。 最初のステップを迅速かつ安価に行う方法。
• 現在のGoogleアクセシビリティの取り組みの概要 。

Dyslexic.com

このサイトでは、ディスレクシアのための資料、ガジェット、記事、有用なリソース、その他多くの情報を収集しています。 たとえば、適切なフォントの選択があります 。



認知症にやさしいウェブサイトの設計

ローレンス・アイビルとポール・マイルズは、医学的意味でマラスム病の人にサイトを適応させる方法について書いています。 彼らは、この精神疾患を持つ人々のグループにインタビューし、デザイナーに推奨を行いました。

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

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

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

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

ボットのユーザビリティヒューリスティック

Kevin Scottは、古典的なJacob Nielsenヒューリスティックをボットに適合させました。 記事の最後で、aboutは3つの実際のボットを評価します。







機能する非常にシンプルなカラーマッチングアルゴリズム

YandexのMichael Anikinが、Yandex.Launcherに使用されたカラーマッチングアルゴリズムについて説明しています。 アイコンに基づいて、アプリケーションカードのジューシーで調和のとれた背景を設定します。







設計のデバッグ

デバッグがデザイナーにとってどのように機能するかについてのBjangoチームの興味深い考え。 プロセス、ツール、テクニック。



スケッチ3.8

Sketch 3.8がリリースされました。 スケッチミラーの再設計と多くの小さな更新。 翻訳 その他のツールニュース：

• スケッチは、タイル状の形状、幾何学的パターンの作成に簡単に対応し、あらゆるタイプの形状（円形、正方形、不規則な多角形など）のシームレスな塗りつぶしを作成できます 。
• Magic Presenterプラグインを使用すると、Sketchでプレゼンテーションを作成できます 。 著者の説明と翻訳
• Arrowifyプラグインを使用すると、行の最後に矢印を簡単に作成できます 。
• Evil Martians のCompoプラグインを使用すると、要素のサイズと位置がテキスト（ボタン、リスト項目など）に依存するコンポーネントを簡単に操作できます。 クリエイターからの説明 。
• プログラミングスキルなしでFramerでラピッドプロトタイピングを行うための優れたプラグイン -フェードイン、ズームイン、スライドインなどの既製のトランジション FramerモジュールとオプションのSketchプラグインで構成されています。 翻訳

Adobe Experience Design CCの5月の更新

Adobe XDのベータ版がリリースされました。 プロトタイプにスクロール可能な領域とその全画面表示を追加し、テキストとオブジェクトの作業を改善しました。 次のリリースにはさらに多くの計画があるため、明らかに、開発チームは徐々に必要なペースを獲得しています。 その他のツールニュース：

• Adobeのデザインマネージャーの1人であるJosh Ulmへのインタビュー。
• ワイヤフレームテンプレート。

InVision Craft

• Craftの新しいバージョンでは、チーム内のコンポーネントとスタイルを同期するライブラリ機能が追加されました 。 最後に、タンバリンと踊ることなくすべての人が利用できる単一のライブラリを持つことが可能になります。 これは既にSketchで利用でき、Photoshopでもすぐに利用できるようになります。
• Andreas Larsenは、新しいCraftのベータ版を受け取りました 。これは、購入したSilver Flowsから既にプロトタイピングを実行しています。 この記事には、この機能の動作のビデオがあります。 翻訳

原理

• バージョン1.2がリリースされました 。 ビデオとオーディオのプロトタイプで使用できます。

フリント

• Flinto 1.5がリリースされました 。 高度なアニメーション機能、サウンドの操作、シンプルな形状の作成。

ゼプリン

• Zeplin for Photoshopのベータ版が登場しました 。 確かに、これまでのところMacのみです。
• Zeplin for Windowsがリリースされました。 ダウンロード

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

カルマ警察、この男を逮捕、数学で語る：UX研究で方法を混ぜる方法

定性的研究と定量的研究の方法を組み合わせる方法に関するShopifyのAlena Luginaによる豪華な記事。 ユーザーの行動を監視する方法とポイントの非常に興味深い分析。







UX研究と市場調査の組み合わせ

ジェフ・サウロは、古典的なマーケティングとUX研究を組み合わせる方法について話します。 この記事には、方法とその適用の目標が適切に段階的に記載されています。



データの視覚化：生スコアと差分スコア

ベンチマーク比較を適切に視覚化する方法に関するジェフサウロ。 一般的な値とそれらの違いの両方を示すことが重要です。



何が間違っている可能性がありますか？ ユーザビリティテストの最大の間違い

Jim Rossは、ユーザー調査の際によくある間違いのリストをリードしています。



ブランド調査の長所と短所

ジェフ・サウロは、匿名で会社を代表してユーザー調査を実施することの長所と短所を比較します。

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

Webフォームの現在の状態

最新のフォームフィールド検証テクニックのレビュー。



Dribbbleのコンセプトからコードまで

• 概念に基づいたRamotion iOSおよびAndroidコードの大規模なコレクション 。

ヌードル

• このツールはベータ版ではありません 。 現在では、モノのインターネットをプロトタイピングするためのツールとして位置付けられています。

フレーマー

• Framerの最新バージョンでの作業に関するMarc Andrewのレッスンの翻訳 。

新しいスクリプト

• Canvaデザイナー向けのツールの作成者は、製品内でどのように微小相互作用が行われるかについて話します 。
• ボタンのアニメーション効果とその変形のコレクション 。
• 描画された形状を持つ異常なページ読み込み効果のコレクション 。
• 熱による空気の歪みがWebGLに与える影響 。
• WCAG 2.0アクセシビリティ標準に従ってモーダルダイアログを実装するためのスクリプト 。

CSSアニメーション

• Web Animations API標準の概要 。

ブレンドモード

• Una Kravetsは、CSS、SVG、HTML5 canvasを使用してエフェクトを実装するさまざまな方法のパフォーマンスを比較しました 。

Svg

• ボクシーSVGオンラインエディター 。

指標とROI

「コンテンツの収益」を測定する-コンテンツが成功したかどうかを判断する方法

サイト上のコンテンツのROIを計算する方法に関するコンテンツ会社の素晴らしい記事。 「目標を設定→メトリックを定義→測定と改善」というアプローチ自体は新しいものではありませんが、コンテンツへの適用は興味深いものです。







パフォーマンスマーケティング物語

戦略に影響を与えずに製品の商業的成功を保証することが困難である理由に関する簡潔な言葉で書かれた記事。 パフォーマンスマーケティングの例についてですが、インターフェイスにも関連しています。

UX戦略と管理

パラダイムシフト-ビジネスと社会におけるデザインの新しい役割に関する報告

Gjoko Muratovskiによるデザインの制度化に関する主要なイベントの最も強力な概要。 食品会社、コンサルティング会社、ベンチャー基金、公立および慈善団体の例を使用して、彼はデザインが成功の鍵となる能力の1つであり、一般に重要な要素になることを示しています。 それぞれの例について、彼はデザインリーダーからの簡単な歴史を述べています。 たくさんありますが、それだけの価値があります-設計戦略のトピックに関する最も貴重な資料の1つです。



ハイパーアイランド＆チームウィーク

ハイパーアイランドの学生は、チームエンゲージメントテクニックに言及しています。 それぞれに説明、テンプレート、および段階的な指示があります。







デザイン文化の構築

• Duolingoデザインチームの仕組み
• 改善設計チームの仕組み
• 一方、興味深い考えは、開発者がデザイナーと統合するために必要であり、重要である理由です。
• Khoi Vinhは、最初のデザイナーを雇うスタートアップにアドバイスをします。 彼は会社の設計の将来の運命に非常に重要な影響を与えるでしょう。
• Alexey IvanovはUXMattersにチームワークの動向と彼のTeamwork Canvasフレームワークについて話した 。

常にあなたの作品を見せてください-デザイナーが壁に書く理由（そしてあなたもそうすべき理由）

Greater Good StudioのGeorge Ayeが、マッドボード、コンセプト、およびその他のアーティファクトを使用したプロジェクトディスカッション用の安価なワークスペースを作成する方法について説明します。 最後に、アセンブリのアクセサリのリストがあります。







デザイナーの指定

• マルチチャネルインタラクションにおけるパフォーマンスマーケティングに関するArtemy MalkovとIlya Stremkovskyによる優れたプレゼンテーション 。 関係する聴衆との仕事の棚に非常によくレイアウトされています。
• ShypのKurt Varnerは、一般的な言語を話すことはどれだけ重要かについて書いており、ブラシで銃撃戦に出てはいけない 。
• エリカホールは 、チームがさまざまな形式のユーザーフィードバックに常に依存している場合、多くの人がそれらを1回限りのアクティビティと見なし、経験的な設計アプローチを採用するため、 研究または分析について個別に話すのをやめることについて述べています。

ロバート・フックマン・ジュニア -必要な経験：役割に関係なくUXリーダーになる方法

昨年末、ロバートホークマンジュニア 「経験が必要：役割に関係なくUXリーダーになる方法」 Fast Co Designは、多くのデザイナーのrog慢なアイデアと矛盾するユーザーに関する14の事実を収集しました。 デザインリーダーに関するその他の資料：

• IDEOのティムブラウンは、現代のデザインリーダーがどうあるべきかについて考えています 。

製品管理と分析

Googleアナリティクス

• Googleアナリティクスでは、さまざまなデバイスで特定のユーザーを追跡して、製品との相互作用のより完全なプロファイルを取得できるようになりました 。
• また、さまざまなチャネルおよびさまざまな国でユーザーを引き付ける効果を比較することもできます 。

事例

状態の再設計。 新しいブランドと言語

ロシア通信省とRocketmindの新しいGosuslugポータルに関するよく説明されたケーススタディ。 テキストのマキシム・イリャホフを含む多くの強力なサードパーティの専門家と企業が仕事に関与しました。 その他の再設計事例：

• デビッド・スコットがそれについて語っています。 Eventbriteがシンプルなもので製品とマーケティング資料の再設計を開始した方法 。 視覚言語の形成に対するかなり興味深いアプローチ。
• フォームの再設計と、一般的にUCLAの内部アプリケーション処理プロセスに関する興味深い話 。 サービスへの統合アプローチとして、アプリケーションの処理を大幅に削減しました。
• Microsoft Flowサービスはどのように作成されましたか 。
• アンドリューオフスタッドは、エアテーブルカレンダーの作業プロセスについて語っています 。
• Vox Media Chorusのデザインシステムに基づいて、ニュースサイトの再設計とコードの再設計を行いました 。

トレンド

2016年デジタルネーションの現状

UstwoのJules Ehrhardtは、デザインコンピテンシーの食料品会社への移行という文脈でのエージェントビジネスの現状について、非常にクールな長い読み物を書きました。 彼はスタジオの購入理由と市場の前提条件を分析し、最終的には現代的な代理店のモデルを提供します。クライアントの仕事を続けていますが、自社の製品とスタートアップへの投資も扱っています。 1時間半読んでいますが、毎分かかります。







Webデザインの最もホットなトレンドは、意図的にugい、難しいサイトを作成している

2014年、パスカルデビルはゴミサイトブルータリストウェブサイトのコレクションを集め始めました。 5月、より幅広い聴衆が彼を探し出し、ワシントンポストやFast Co Designを含む多くのメディアの見出しにヒットしました。 ロシア語への翻訳 。







仮想現実のユーザーエクスペリエンス

バーチャルリアリティのトピックに関する記事、書籍、ビデオ、プレゼンテーション、およびその他の資料の広範なコレクション。 選択がどれほど有用かどうかキュレーターによってチェックされたかはわかりませんが、印象的です。







仮想現実に関するその他の資料：

• NetflixのCEOは、同社がバーチャルリアリティに投資する計画はないと述べている 。 長い映画を見るのは、ヘルメットをかぶっただけでは不快であり、観客はまだそれほど多くありません。

メッセンジャーとボット

• ボットとインスタントメッセンジャーに関するMediumのChatbots Magazine記事のコレクション 。

カーインターフェース

• 日産の設計プロセス 。
• フィアット/クライスラーはドライバーに理解できないギアシフトレバーのため812,000台の車を呼び戻します。

モノのインターネット

• オブジェクト間の相互作用が描画を使用して設定されるスマートホームの概念的なソリューション 。

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

UXの学習のUXは壊れています

Dan MaccaroneとSarah Doodyは、現代の短期設計教育の課題について議論します。 短期コースは、雇用の保証が約束されている半生の専門家をpunchります。 さらに、実際には、企業はより深刻なレベルの知識と経験を必要とします。







5月1日の再起動

復活した＃May1Rebootイニシアチブには、3,000以上のプロジェクトが関与しました。 サイトはそれらの多くを公開しています。

業界の人々と企業

FacebookでOpen Design Critiqueに参加する

Facebookは、サードパーティプロジェクトのデザイン批評イニシアチブを開始します。 メディアに作品を公開する場合、「[問題]を回避するために[問題]の回避策を示しています」という形式の説明を付けます。 [フィードバックの具体的な焦点]およびFacebookDesignCritタグに関するフィードバックを探しています。会社のデザイナーから無料の推奨事項を入手できます。







中コレクション

• ハイパーアイランドからの記事の選択 。
• GEデザインチームブログ 。

AMAセッション

• Google ATAPのIvan PupyrevとのAMAベースのインタビュー 。
• SFCDのAnton ZykinとのAMAベースのインタビュー 。

会議議事録

英国デザイン大学院のUX / UIサマー集中

ブリティッシュハイアースクールオブデザインでは、Yaroslav Shuvaevが作成した集中的なUX＆UIが6か月ごとに行われます。 これは8日間の集中作業形式で、学生グループがWebまたはモバイルのトレーニングプロジェクトに取り組み、講義を聞き、国内の主要デザイナーによるマスタークラスに参加します。 スキルを強化したり、さらなる発展のために専門分野の概要を知りたい人を対象としています。 その結果、グループは、ポートフォリオおよび優れたチームワークの経験で国内の大手インターネット企業の1つからプロジェクトを受け取ります。







Mail.Ru Groupのデザイナーと研究者は、6月28日から7月6日までのコースで、インターフェイス設計に対する最新のアプローチがどのように飛躍を遂げたのかについて話します。 たとえば、近年、国際的なブランドMy.comが立ち上げられ、製品ライン全体が独自の設計システムに移行され、モバイルアプリケーションはAndroidとiOSで年間最高の公式コレクションに常に含まれています。 私たちはまだこの大規模なアップグレードパスの真っare中にいますが、多くの企業が設計を体系化する方法を始めたばかりであり、私たちの経験は役に立ちます。



受講者は、デジタル製品の作成サイクル全体を通して作業することを学びます-ターゲットオーディエンスと市場の調査、コンセプトの作成とテスト、インターフェースの設計とデザイン、ユーザーテストと分析、アイデアのプレゼンテーションと防御。 国内最大手の企業のタスクでは、UX / UIの作成方法と実践を実践し、最新のプロトタイピングとデザインツールを試してみます。 その結果、ポートフォリオは実際のプロジェクトに近くなり、履歴書では新しいチームワーク体験になります。



ServDes。2016-サービス設計とイノベーション会議

5月24〜26日に、ServDes 2016サービスの設計に関する会議がコペンハーゲン（デンマーク）で開催され、 プレゼンテーションのプレゼンテーションが公開されました。



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



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