フードデザインダイジェスト2014年6月

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

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

Baymard：eコマース検索のユーザビリティ-独自の調査研究

新しいBaymard Instituteは、eコマースサイトの検索インターフェイスに関する研究について報告しています。 近い将来、彼らはレポートからの抜粋の発行を開始します。 お知らせ 。

• 最も人気のある検索クエリの処理に関する最初の絞り込み。
• 8つのオートコンプリートフィールドデザインテンプレート 。

シェア：誰も同意しないアイコン

「共有」はネゴシエートできないアイコンです。MinMing Loは最も一般的なオプションを解析します。 トピックの続き：

• 共有アイコンに関するDmitry Fadeev： いくつかの抽象的な概念は、物理オブジェクトを使用して想像するのは困難です 。

ラジオボタン：常に1つ選択しますか？

Nielsen / Norman GroupのKara Perniceは、ラジオボタンについて深く体系的に理解しています。



中空のアイコンは、中実のアイコンよりも本当に認識しにくいですか？ 調査研究

Curt Arlegeは、輪郭アイコンが本当に読みにくいのではないかと考えて、研究を行いました。 結果は完全には明らかではありません。



動作中のWebアニメーション

ウェブアニメーションに関するレイチェル・ナボールの記事の翻訳。



デジタルデザインとユーザーエクスペリエンス-7つの有益なベストプラクティス！

UX、モバイル戦略、電子商取引に関するウェブ分析の専門家であるAvinash Kaushik。 多くの興味深いこと、正確な観察、細部。 たとえば、「モバイルファースト」戦略の代わりに、「モバイルのみ」のアプローチを提案し、ユーザーを2つの主要な行動グループ「アクティビティ指向」と「思考指向」に分割します。



アイデアを呼ぶ-インスピレーションを得る！

適切に設計され、補充されたWebデザインパターンのコレクション。 ログイン、登録、空の状態、フォーム、リストなど。



バーが下向きのとき

インフォグラフィックスの新しいトレンドは、従来の右または上ではなく下に向けられた棒グラフの使用です。 これは、失業、死亡などのマイナスまたはマイナスの現象を説明するのに適しています。



非営利および慈善団体のウェブサイトで寄付を得るための5つのヒント

Nielsen / Norman GroupのJanelle Estesが、慈善団体の募金を増やすためにデザインを使用する方法について説明しています。

ユーザーの理解

Webデザインで最も過小評価されている言葉は何ですか？

ナタリア・ポストロフスカヤの「アフォーダンス」の概念のニュアンスの詳細な分析。 彼女はいくつかのタイプのアフォーダンスを識別し、例としてモバイルアプリケーションを使用して解析します。



ペルソナ共感マッピング

Cooper ConsultingのNikki Knoxが、ペルソナ共感マッピング技術の使用方法について説明します。 期待と感情のニュアンスを考慮に入れて、キャラクターをより詳細に記述することができます。



ユーザーの目標を引き出す

ユーザーの目標を調査して説明する方法についてのDavid Travis。 前半では、インタビューとクレイトン・クリスチャンセンの枠組み「やるべき仕事」の2つのアプローチについて説明します。



Facebookがユーザーに関する巨大な心理実験を明らかに

Facebookの物議を醸す感情管理の調査では、約70万人の英語を話すユーザーが昨年それを知らずに参加しました。 ニュースフィードのポジティブまたはネガティブな投稿の数を変更するときのユーザー投稿のムードを調査しました。 研究自体、および一般的に感情の操作について 。



「この質問に答えるのに十分信頼してくれますか？」信頼とデータ品質

キャロラインジャレットは、要求された情報を入力する際に​​ユーザー間の信頼感をどのように作成するかについて説明しています。

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

Googleデザイン

GoogleはI / Oカンファレンスで、統一されたマテリアルデザインイデオロギーとメインドメイン上の単一のサブサイトを発表しました。 これは、Web、モバイル、タブレット、ウェアラブルデバイス、テレビ、自動車など、デバイスおよびデバイスの全ラインのインターフェースに対する統一された適応アプローチです。 彼らは、「物質」設計を部分的には偏見への参照として理解しています-影を使うことを恐れず、オブジェクトの重要性を強調し、アニメーションの役割を強化します。 その本質は 、現在デザイン会社の副社長であるMathias Duarteによってよく開示されており、その前に彼は画期的なWebOSを作りました。



これは、視覚的には現在のAndroidスタイルの開発であり、色付きの見出し（ステータスバーの色付け）とメインアクションの丸いデフォルトアイコンに重点を置いていると言えます。 後者は、さまざまな画面で非常によく再生されます。たとえば、 ヘッダーとコンテンツの水平方向の接合部にあり、ピクトグラムの行を垂直方向に継続します。 イデオロギーの基礎としてのカードの積極的な使用は継続しており、メトロのタイルが増えています。 サイドバーは、最近のGoogle+アップデートで大幅に廃止されたにもかかわらず、そのまま残りました。 独自のフォントRobotoが更新されました。これはWebサービスの基礎と思われます（ クイズアプリのコンセプトは、これがどのように行われるかを示しています）。



iOS8に示されているものと多くの類似点があります。表示されるとすぐに画面に表示されるクイックアクションを備えた通知メカニズム。 スマートフォンとChromebookの束。 Google Fitウェアラブルデバイスからデータを収集するためのハブ。 ウィンドウのスタックがより積極的に使用され、ダイアログがGoogle Nowカードの精神で変化し、最終的に/コピー/貼り付けモードが明確になりました。 インターフェース全体に共通のバック/ホーム/起動されたナビゲーションアイコンが、4つのブランドのPlayStationシンボルに似ているのは面白いことです。 画面の大規模なコレクション 。



更新されたAndroid TVも統一されたデザインを使用しています。 自動車のプラットフォームでも見ることができ、時計ではっきりと見ることができます（ちなみに、視覚的識別の主要な要素の1つであるメインアクションの丸いボタンは、 そこから来たようです ）。 Material Designのイデオロギーに基づいて、主要なOSであるAndroid Lの新しいバージョンがリリースされます。 さらに、 参照デバイスを備えたAndroid Oneのイニシアチブのおかげで、デフォルトのインターフェースを備えた電話の数が増加します。 また、サードパーティのメーカーによるテレビ、車、時計のデザインはまったく変更できません。 そのため、市場の獲得後、Googleは設計上の問題の解決に忙しかった。 そして彼は、このような巨大なスケールで機能する最も強力なコンセプトの1つを示しました。 トピックの続き：

• 設計ガイドライン （PDF）および通常のページ 。
• イデオロギーのビデオプレゼンテーション 。
• スマートフォンとタブレットのインターフェースの画面の巨大なギャラリー 。
• Polymerフレームワーク 。これは、単一設計のレスポンシブWebアプリケーションの基盤です。 プロジェクトのウェブサイトには、インタラクティブなプロトタイプをライブで収集できるオンラインデザイナーがいます。 また、いくつかのデモアプリケーション（たとえば、 Topekaアンケート ）。 彼らは、イデオロギー全体の行動を非常に明確に示しており、さまざまな制御、移行、および状態が多数あります。
• マテリアルデザインを使用したAndroid TVの画面 。
• Pinterestでスマートフォンの画面を収集しました 。
• Android L Developer Previewインターフェースの概要 。
• 強力な業界デザイナーがマテリアルデザインについてコメントしています。
• Google I / Oの前夜、 LGはスマートフォン用の視覚言語のビデオプレゼンテーションを投稿しました 。 Material DesignおよびiOS7と多くの共通点があります。

Apple iOS 8

6月2日にiOS8が導入され、プラットフォームの機能が大幅に拡張されました。 インターフェースの観点から、これはいくつかの新しいパターンの追加による昨年の根本的な再設計の進化です-円形メニューのパス、通知センターでのウィジェットの操作、バックグラウンドで前のウィンドウでポップアップを開く、共有メニューを介したアプリケーションの対話のための高度な機能、ダイアログのアイコンメニュー、限られたカードの使用（健康）、アイコンスタイルの開発、メールボックスのような両面スワイプ、その他の小さな詳細。 また、このスタイルが新しいMacOSにどのように当てはまったのか、興味深いです。エコシステム全体での単一の視覚言語の素晴らしい例です（通常の設定とSafariアイコン！そして今のところ、Lucida Grande ）。



最も壮観なものの1つは、OSレベルで配線されたデバイス間のクロスチャネル相互作用の可能性です。 デバイス間の移行シナリオはさらにスムーズになります（もちろん、これがすべてデモのように機能しない限り）。 さて、iOSは車、スマートホーム、ウェアラブルデバイスと対話するためのハブになりました（もちろん、これらすべてがメーカーによってサポートされる場合）。 発表されたすべてのリスト 。



しかし、最もクールなのは、ビジュアルプログラミングへの次のステップである新しいSwiftプログラミング言語です。 IOSガイドラインは非常にミニマルであるため、開発者は設計者を必要としません。 また、開発環境はシンプルなので、設計者自身が最終的なソリューションを作成できます。 それへのガイド 。 判明したように、ビジュアルプログラミングの主要な伝道者の1人であるBret Victorが手を取りました（UPD： 事実または事実ではなく、後に判明しました）。 プログラマティック記事であるMagic Inkを再読または発見することをお勧めします。 トピックの続き：

• プレゼンテーションのインターフェイスのスクリーンショットのギャラリー 。
• Sketch用UIキット 。
• WWDC '14のすべてのAppleプロモーションのコレクション 。
• WWDC '14のセッションレコード 。
• Tobias Frere-JonesはMacOSでHelveticaを批判しています。
• Android（およびWindows Phone）から借りたものに関する義務投稿 。
• Safariは、クレジットカード情報をスキャンしてフォームにすばやく入力できるようになります 。
• iOSとMacOSの緊密な組み合わせのおかげで、 サードパーティのアプリケーションなしでスクリーンキャストを記録できます 。
• Swiftのすべてを1か所で 。
• OS X Yosemiteでのアプリケーション設計のためのPSDユーザーインターフェイス要素。
• OS X Yosemiteの別のキット 。 より正確で、作成者はベータ版の開発プロセスで更新することを約束します。

Android Wear

• Roman Nurik がAndroid Wearの設計とアプリケーション設計の事例について語っています 。
• Android Wearの紹介 。
• Android Wearの設計 。
• Android WearでのSamsung Gear Liveのレビュー。 ビデオ作品 。
• モトローラコンテストの1300ウォッチのコンセプト 。

Axure Flat UI Kit-Axure用の最も包括的なUIライブラリ

フラットスタイルのAxure用の要素の大規模なライブラリ。 モバイル、タブレット、およびWeb用。



ピクサート

モバイルインタラクティブプロトタイプを作成するための有望なツール。 時々、そして相互作用から、アニメーションを視覚化する機能。 デバイスでのインスタント「ネイティブ」起動。 素敵なインターフェイス。



インビジョン

• 製品への強力な追加-PSD、AI、および.sketchからの自動インポート、およびバージョン管理 。

アドビ花火

• JavaScriptを使用してプラグインを作成します 。

Framer.js

モバイルアプリケーションFramerのプロトタイプを作成するためのツール。ブラウザで複雑な相互作用やアニメーションを「タッチ」できます。 確かに、レイアウトとスクリプトの基本的な知識が必要です。

• フレーマーは、Potluckチームが製品を壮大なアニメーションで盛り上げるのを支援しました 。
• Framer.jsの作成者は、モバイルプロトタイピングに特化した特別なコードエディタであるFramer Studioをリリースしました。 ライブプレビュー、PhotoshopおよびSketchとの統合、機内でのコーヒースクリプト。 50ドルかかります。

スケッチ

• サイトをSketchにインポートする簡単な方法 。
• 1つの最大サイズに基づいて、iOSに必要なすべてのアイコンを作成するためのプラグイン 。
• Webでよく使用されるすべてのプラスまたはマイナスの幾何学的寸法のプリセットを含むテンプレート。
• despothのHabréに関する一連の記事 。 パート2、3、4 。
• トレーニング記事とリソースがあるサイト 。
• Sketch.app開発者のコ​​マンドラインから作業し、 ページをエクスポートしてドキュメントからスライスするためのアプリケーション 。 このツールは、開発者が使用するスケッチからスライスまでの設計プロセス全体を促進するように設計されています。 詳細

ワイヤーフレームの設計原則

Chris Bankは、プロトタイピングの原則に関する一連の記事を続けています。



ブートスケッチ

インタラクティブなワイヤーフレームを作成するためのBootstrap 3のテーマ。



Webプロジェクトのガイドライン

サンクトペテルブルクのスタジオNimaxのJulia Markhadaevaが、設計ガイドラインの作成に対する同社のアプローチについて書いています。 この記事は短いですが、このようなドキュメントの優れた例です （PDF）。

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

UいWebサイトを検出できるボットがあった場合はどうなりますか？

同名のアイトラッキング研究サービスを提供するEyeQuant社は、ユーザーのインターフェースとデザインの魅力を自動的に決定する実験製品の開発に取り組んでいます。



A / Bテストのニュアンス

• モバイルアプリケーションのA / Bテストをいつやるべきではないか 。
• このチェーンの基礎を築いた記事のロシア語訳 。
• 設計分析に基づくA / Bテストの仮説の例 。
• 錯視A / Bテスト結果。 Kiss Metricsは、「科学者」、「せっかちなマーケティング担当者」、「現実主義者」の3つのテスト戦略の数学的モデリングを実行しました 。

タッチインターフェイスのヒューリスティックの経験的開発

Rebecca BakerとXiaoning Sunは、古典的な発見的手法であるJakob NielsenとRolph Molichをタッチインターフェイスに適応させようとしています。 彼らはデバイスとエミュレーターで一連の実験を行い、一般に、古典的なアプローチは予約で機能すると結論付けています。 トピックの続き：

• リッチマセフィールドはヒューリスティック評価法にその定義を与えようとしています 。

間違った計画を完全に実行する （Tomer Sharonによるパフォーマンス）

Google I / O 2014でのTomer Sharonの優れたパフォーマンスo典型的な起動ミスとo Lean User Research。

ビジュアルプログラミング

新しいスクリプト

• クレジットカードデータエントリのインスタント視覚強化のためのスクリプト。
• このようなアニメーションを記述するための興味深いアプローチでインターフェイス要素をアニメーション化するためのライブラリ。
• SVGのグラデーションの詳細。
• WebサイトまたはWebアプリケーション用のカスタマイズ可能なHTML5テンプレート 。
• タッチスクリーンのサポートを適切に実装する方法について。 そのため、マルチタッチを含むジェスチャは、iOSからWindows Phoneまで、どこでも正しく動作します。
• キーボード制御をサポートするページナビゲーション用のスクリプト。
• CSS3アニメーションを生成するための美しく便利なサービス。
• ページの背景の画像間の興味深い遷移効果 。
• カラーパレットを選択および保存するためのツール。
• jQuery Velocity.jsのプラグイン。 小さなチュートリアル 。
• Drive.ruのMediumまたは古いバージョンの両方にコメントを実装するためのスクリプト。 見栄えが良く、不具合なく動作し、通常の既存のプロジェクトに簡単に統合できます。
• ほとんどのデスクトップおよびモバイルオペレーティングシステムをサポートするマルチタッチジェスチャを実装するためのライブラリ 。 適度なライブラリサイズ、例、使いやすさとgithubでのMCHammerのダンス 。
• 2秒で作成されるgif用のプレーヤー 。
• あらゆる種類のファビコンをオンラインで生成するための優れたツール 。
• さまざまな複雑さの図を描くための優れたライブラリ 。

オデッセイ

ジャーナリスト、デザイナー、あらゆる分野の旅行者、そして一般的にあらゆるクリエイターのための興味深いツール。 地図、画像、動画、その他のメディアを組み合わせて美しいストーリーにすることができます。 ライブラリは活発に開発中であり、まだ多くは実装されていません。 ソースコードは公開されており、開発者は新しいチップを実装するための支援を積極的に探しています。

指標とROI

ユーザーエクスペリエンスに適したメトリックの選択

Pamela Pavliscakは、ビジネスデザイナーと製品デザイナーの両方に役立つメトリックスに対する包括的なアプローチを採用しています。 企業が追跡するさまざまな指標セットを提供し、製品チームのすべてのメンバーに役立つ単一のセットを提供します。

フロントエンドのプロジェクト、プロセス、およびチームの管理

「エンドアップ」テクノロジーの世界でデザイン文化を構築する

John MaedaとBecky Bermontは、eBayを例として使用して、企業でデザインカルチャーを作成することの重要性について説明しています。 これにより、チーム全体を正しい方向に設計および開発するための正しい態度を形成できます。



グレートUXの横断–アジャイルディバイド

アジャイルとUXの話題は長い間あらゆる側面から吸い込まれてきましたが、マイク・ブラジェウスキーは労働組織の哲学の観点から新しい方法でやって来ました。 彼は方法論の純粋なバージョンを主張する開発者の立場を説明していますが、この形式では設計に完全に適しているわけではありません。



誰もが今戦略を行っています

GOV.ukチームのLeisa Reicheltは、かつてUX戦略に関する本を書き始めました。 これのほとんどを完了した後、彼女は彼女が最初に多くの事に間違われたことに気づいた。 彼女は未完成の本の記念碑として一連の記事を発表しました。 継続：

• 戦略は別に存在しません 。
• 戦略、高速および低速 。
• チームスポーツとしての戦略 。
• モジュラー戦略 。

ホワイトボードでインタビューを行うための10のヒント

ジョシュ・ザイデンは、デザイナーにホワイトボードのスケッチでインタビューすることについて語っています。



中小企業のWeb情報アーキテクチャの実践者

オーストラリアの中小企業が設計上の課題にどのように対処しているかに関する研究。

製品管理と分析

製品設計の原則

Joshua Porterは、製品設計の19の原則を説明しています。

事例

最新の編集CMS

• Scoop、新しいCMS NY Times 。
• Googleは、サードパーティの出版物のプラットフォームとしてCMSを準備している可能性があります。
• Say MediaのTempest CMS 。 CTO会社からの概要 。
• Guardian開発者は、管理パネル用のエディターの作成方法について話します。 彼らの意見では、既存のソリューション（TinyMCEなど）の主な問題は、カスタマイズ機能の欠如です。 結果はScribeです。
• Jason Santa MariaやMandy Brownを含む実験的なCMS編集チームは、Vox Mediaの一部になります。 これについてもう少し 。 コーラスはさらに宇宙的になります。

コンテナモデルとブレンドコンテンツ

新しいデザインの発売を見越して、ガーディアンニックヘイリーはその中に定められた原則について話します。 彼らは、情報アーキテクトのコンスタンチン・ワイスによってよく説明されている「コンテナ」イデオロギーを積極的に使用しています。 私は、UXポーランドでのこのトピックに関する彼のプレゼンテーションで、彼はそれを非常に詳細に説明しました（申し訳ありませんが、スライドはまだありません）。 実際、大規模な製品に使用される単一ページのサイトの開発について話している。 ところで、昨年末以来、私たちは同様のモデルに基づいてコンテンツプロジェクトのフレームワークを開発してきました。秋までにプレゼンテーションを準備しています。 トピックの続き：

• 新しいThe Guardianのベータ版 。
• 作成方法に関するサイト 。

物語

Androidの歴史

プラットフォームのメジャーバージョンとマイナーバージョンのそれぞれの分析を含む非常に詳細な記事。 すべてのインターフェイスのすべての画面は単なる金色のようです！

トレンド

未来的なインターフェースの美学

映画、ゲーム、および一般的に未来的なインターフェースの視覚的およびインターフェース言語の深く詳細な研究。 とてもクールです。



ソフトウェアはハードウェアを食べている-魔法のデバイスを構築するためのレッスン

iPod、Jawbone、Pencilで働いていたAdam MacBethは、新しいデバイスを作成する機能について書いています。 トピックの続き：

• デザインスタジオからガジェット会社に変身したロンドンのバーグの事例 。

ヴァージンアメリカのウェブサイトは、予約ウィザードに別れを告げ、アバターにこんにちは

Virgin Americaは、モバイルファーストアプローチに基づいて、 新しいサイトのベータ版を発表しました。 航空会社の予約プロセスに関する興味深いアイデアを提供するため、その発売はデザイナーの間で十分な議論を受けました。 トピックの続き：

• 国内のEviterraは、何年も前にこの道を歩んだ。 実際、情報を入力すると徐々にロードされる1ページのフォームは、相互作用が非常に動的であり、ユーザーに焦点を当てています。 それはビジネスの観点からそれが一緒に成長しなかったことは残念です。 Phil AkhnazarovとNikolai Zayarnyは、UX環境のインターフェースの詳細について話しました 。
• ジェフサウロの航空会社サイトとアグリゲーターの有用性研究 。

フラットvsリアリズム

ストーリー形式のフラットなデザインと現実的なデザインの違いに関する効果的なプロモーションサイト。



カーインターフェース

• メルセデスベンツのカリフォルニアに拠点を置くUX研究者へのインタビュー 。
• Android Auto Platformサイト。 そして、 そのインターフェースの概要 。

犬のようなアルゴリズムを飼いならす必要がある理由

人々とアルゴリズムの相互作用と相互進化の経験に関するダンサファー：「先祖が犬を飼いならしたように、人々はアルゴリズムを飼いならす必要があります。」



Salesforce Wear開発者パック-オープンソースのスターターアプリ、ツールキットなど

SalesForceは、ウェアラブルデバイス用のアプリケーションを作成するために、独自のかなり広範なイニシアチブを開始します。 彼らは、時計、ブレスレット、眼鏡がビジネス用途に役立つと信じています。 特別なサイトには、6つのデバイスのコードと設計例が含まれています。

専門能力開発

UXキャリアフレームワーク-マネージャーと従業員間の会話の促進

SalesforceのUXディレクターであるIan Swinsonが、デザイナーのキャリア管理に対する彼のアプローチについて語っています。



ハンティングユニコーン-効果的なUXプロフェッショナルを作るもの

製品デザイナーのスキルに関するパトリックニーマンによるプレゼンテーション。







ユーザーエクスペリエンスを超えて-前方および上方

Luke Chambersは、インターフェイスの専門家を専門的に開発するための最も一般的で理解しやすい6つの方法について説明しています。 この製品は、プロジェクト管理、促進、トレーニング、戦略的コンサルティング、独自のビジネスの作成です。



開発者が設計を学ぶ必要がある理由

近年、デザイナーがタイプセットできるかどうかについて多くのことが書かれています。 Stephen Caverは、開発者が設計を理解する必要があるという反対の考えを示しています。



Web上のデザインについて知っておくべきことすべて

設計に関する一般的な記事、ツール、およびその他のリソースの別のコレクション。



ユーザーエクスペリエンスからサービスデザインへのキャリアシフトの実現

ローラケラーは、スペシャリストの製品設計からサービス設計への移行について書いています。

業界の重要な人々

最もクリエイティブな人々2014：DropboxのデザイナーとのQ＆A

最も強力で急成長しているDropboxデザインチームへのインタビュー。 プロセス、ツール、一般原則について。



ShumがMicrosoftのデザインルネッサンスを導きます

6か月前に、Albert ShumがMicrosoftのUser Engagementのディレクターになったことがわかりました。 とりわけ、彼はメトロデザインの主要なイデオロギー家であり、2007年にナイキから入社しました。



UXデザインインタビュー （中）

Mediumのもう1つのキュレーションテープは、一連のデザイナーインタビューです。



スーザン・カレ

最初のデジタルデザイナーの1人であり、最初のMacのアイコンの作者であり、一般的に製品デザインで最も伝説的な人物の1人であるスーザンカレは、Appleでの仕事について語っています。



Spotifyがサイドプロジェクトをバカにする必要がある理由に関する設計リーダー

Life as a project-Spotifyのデザイン責任者であるTobias van Schneiderへのインタビュー。

会議議事録

カンファレンスのまとめ-今後のWebデザインイベント（6月-2014年12月）

2014年後半の主要な国際UX会議。



会議レビュー：UX STRAT 2013、パート3：2日目

9月9〜11日にジョージア州アトランタで開催されたUX Strat 2013会議のスピーチのレビューの継続。



ServDes。 カンファレンス2014ランカスター

4月9〜11日に英国のランカスターで開催されたServDes 2014会議の議事録。 彼女はサービス設計と顧客体験に専念しています。



新鮮なリンクも同じFacebookグループで追跡できます。 特にGennady DragunとPavel Skripkinのリンクを公開しているすべての人に感謝します。