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

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

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

複雑なアプリケーションのフォームデザイン

Andrew Coyleによる複雑なWebアプリケーションでのフォームレンダリングパターンの概要。 翻訳







レスポンシブサイトはモバイル上でそれほど高くなければなりませんか？

VigetのKevin Vigneaultは、レスポンシブサイトの高さを覚えておくことが重要だと書いています。 多くの場合、ブロックを互いの下に単純に配置すると、膨大な数のスクロールが発生します。







標準の共有アイコンはありますか？

• Microsoftは、Appleの以前のソリューションを支持して、共有アイコンを放棄しました 。 彼らは調査を行い、彼女が最もよく認められていることを見ました。

ベイマード研究所

• Baymardは、オンラインストアのメインページとカテゴリの調査を更新しました 。 この記事には、市場の変化に関する主な結論が含まれています。

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

パターン≠コンポーネント

Nathan Curtisは、パターンとコンポーネントの違いについて説明しています。 この記事には、モジュール設計のイデオロギーの発展に影響を与えた書籍や記事の良いリストもあります。







トピックの続き：

• ドミニクグエンは、ライブガイドラインの作成方法について書いています 。 彼は、Reactやその他のプラットフォームでコンポーネントビューアーを上げることができる事前に構築されたフレームワークを提供しています。
• Swanky Docs 、ライブガイドラインを作成するための別のフレームワーク。
• Nathan Curtisは、暗い背景に対してインターフェイスのバージョンを作成および説明する機能について書いています 。 EightShapesは、アクセシビリティのために色の組み合わせをチェックするための簡単なWebサービスも投稿しました。設計システムの変数を操作すると、それらで修正する必要があるものがわかります。
• Optimizelyのダニエルオコナーは、同社の設計システムがどのように進化したかについて語っています 。
• Colm Tuiteは、設計システムに取り組む最初のステップ -キー変数の定義-を完全に説明しました 。 彼はBantam CSSフレームワークに取り組んでいます。

優れた製品の背後にある設計原則

Rambler＆CoのAnton Badashovは、有名なWebサービスの設計原則を分析しました。







トピックの続き：

• Degreedの設計原理の視覚的な表示の興味深い例 。

材料設計

• Teo Yu Siangは、Androidナビゲーションの問題を解析します 。 比較的最近追加された下部パネルを含む多くのナビゲーション要素には、テキストラベルがありません。 はい、多くの場合、画面上にこのための場所はありませんが、同じiOSは下部パネルの署名を使用します。

Android Wear

• Android Wear 2.0の小さなレビュー 。2月前半にようやく公開されます。 インターフェース画面のギャラリー 。 興味深いことに、Googleは機械学習エンジンのコンパクトバージョンを作成し、 コンテキストに応じた迅速な回答を使用できるようにしました 。 おそらく、これはスマートウォッチをもう少し便利にするものの一つです。

ユーザーの理解

メディア消費モデル。 人々が読むもの、理由、時期、方法 （PDF）

メディアプロジェクトチームとMail.Ru Group UXラボは、人々がメディアを読む方法に関する調査を実施しました。 これは定性的な調査であり、定量的な調査ではありません。彼らは単に「どのようにそれが起こるのか」という質問に答え、さまざまな行動を収集し、深く調査します。 この動作がどのくらいの頻度または典型的であるかを理解するタスクはありません。主なことは、見つかったケースを包括的に記述することです。 同時に、分析サービスMediatorからの定量データにより、調査結果が確認されます。







製品の最初のマイルの重要性に関するスコット・ベルスキー

Behanceの作成者であり、Benchmark CapitalベンチャーキャピタルファンドのパートナーであるScott Belskyとの説明的なインタビュー。 前半は一般的なもので、後半は製品開発の2つのコンセプト- オンボーディングに関する「最初のマイル」と、 ユーザー を 引き付ける 段階 です 。







行うべき仕事

• ジェフサウロはニーズに応じてユーザーをセグメント化することを推奨し、方法論を行う仕事に言及します。

体験のために話す

インターフェイスデザイナーがゲームデザイナーから学べることについて、Stephen Andersonによる優れたプレゼンテーション。 製品とのユーザーインタラクションをより魅力的な方法で表示する方法に関する多くの有用な考え。

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

UCDtoolbox-UCDのメソッドを見つけて学ぶ

UCD Toolbox学生プロジェクトは、選択ツールを使用して、インターフェース設計方法を単一のデータベースに収集します。 これは完全に再設計されており、特定の状況に合わせて設計および研究方法を選択できます。







複雑なシステムを理解するための5つのモデル

Christina Wodtkeは、マインドマップ、コンセプトマップ、システムマップ、メンタルモデルおよびコンセプトモデルの違いについて説明します。

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

モーションデザインの引き継ぎが簡単に

Paul van Oijenは、開発者向けのフロントエンドアニメーションを指定する方法を提供しています。 彼は、オブジェクトとその変化のダイナミクスを使用して主要な変換をレイアウトします。 この問題の一部は、アニメーションパラメーターをJSONにエクスポートするAfterEffectsのプラグインで解決できますが、記事で説明されている形式は設計システムに最適です。







VRインターフェイスデザインの開始

KickpushのSam ApplebeeとAlex Deruetteは、Sketchで仮想現実インターフェースのプロトタイプを作成する方法を示します。







トピックの続き：

• Capital ONEのApurva Shahが、360本のビデオを作成する方法を説明します 。 彼は面白いアイデアに言及しています-ユーザーの職場や家庭の状況をよりよく理解するために、そのようなカメラで民族誌研究を記録します。
• 拡張現実と仮想現実を多数のMicrosoft HololensおよびHTC Viveと組み合わせた実験 。

スケッチ

• Lunacy、Icons8によるWindows用のスケッチレイアウトビューアー 。
• Yaron Tamuzのレスポンシブテキストを使用してコンポーネントを作成するための具体的で興味深い方法 。
• プロセス図を作成するためのテンプレート 。
• ジョンムーアのスケッチヒントシリーズ 。
• 複雑なキャラクターの作成に関するJon Mooreの記事の続き 。 さまざまなボタン状態を作成する方法を示します。 これは主な問題を解決しませんが-テキストの幅の自動調整。 また、状態は設計システムでより適切に記述されます。
• 自動レイアウトはスタックグループの機能を開発し、最新の更新では、要素のアダプティブグループにflexboxのメカニズムを使用しています 。 Alan Royは、このような適応グリッドを構築する方法を示す詳細なステップバイステップビデオを記録しました 。

クラフト

• InVision Labsチームは、Craft Freehandを開始しました。これは、マネージャーや開発者とレイアウトを議論する機能です。 メインのInvisionの一部は、Craft自体にあります。

figma

• figmaはコンポーネントを開発します-チーム間の同期がより簡単になりました 。

インビジョン

• プロトタイピング機能が改善された付属のモバイルアプリケーションの2番目のバージョンがリリースされました 。

Adobe After Effects

• AirMobベースのAirbnbのLottieライブラリを使用すると、AfterEffectsからJSONにアニメーションをエクスポートし、AndroidおよびiOSのネイティブアプリケーション、またはReactNativeベースのアプリケーションにインポートできます。 少しの背景と目標の説明を伴う発表 。

マーベル

• MarvelはSketchのプラグインをリリースしました。これにより、ツールを離れることなくプロトタイプの変更を確認できます 。

UID8-UX描画アプリ

タブレットでスケッチインターフェイスを作成するための新しいアプリケーションUID8がリリースされました。 より原始的な兄弟とは異なり、紙に描くというおなじみのプロセスに焦点を合わせ、画面間の遷移をサポートします。



最新の公開ツール

• DesignmodoのSlidesフレームワークの3番目のバージョンがリリースされました 。
• Kommersantなどが使用する別の国内レイアウトツール 。

最新の編集CMS

• Meduzaは、その編集用CMSモニターの2番目のバージョンについて話しました 。

アブストラクト

• Matteo Grattonによるツールのレビュー 。

アボコード

• 2016 Avocodeレポート-製品を通過したレイアウトの機能。 テクノロジーの多くの興味深いニュアンス 。

ゼプリン

• Zeplinは画面のバージョン履歴を表示するようになりました 。

デザイナーと開発者の間の妥協

Alex BarashkovとVlad Kamelskyによる開発からレイアウトへの移行に関する優れた記事。

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

リモートバンキングの使いやすさと機能、2017

UsabilityLabは、モバイルバンキングアプリケーションの比較ユーザビリティ調査を開始しました。そこでは、周波数タスクのユーザビリティテストに加えて、Donald Normanの7段階モデル​​を作り直して、すべての機能のユーザビリティを評価しました。 また、「アクセシビリティ」の問題についても触れます。 この研究は4月に準備が整います。







カセット

カセットアプリは、カスタムインタビューを簡単にします。 音声録音に加えて、洞察の草案の書き起こしと分類を提供します。







ユーザー調査方法の分類

• ニールセン/ノーマングループのスーザンファレルは、プロジェクトの重要な段階に関連したユーザー調査方法の分類を提供します 。

すべての頭-ゲーム開発における神経生理学的研究

Ksenia SterninaとHSEの同僚は、過去6か月間、人間の神経生理学的指標を使用したプロジェクトに関与してきました。







コンテキストインタビューの初心者向けガイド

UserFocus David Travisは、ユーザーの人生や仕事の実際の状況でインタビューを実施するためのヒントです。



A / Bテスト

• ドナルドトランプ大統領選挙キャンペーン中のA / Bテストに関するレポート 。

オンラインパネルからのUXメトリックはどれくらい正確ですか？

ジェフサウロは、NPS、SUPR-Qを含むいくつかの一般的な指標について、異なるパネルからのユーザーの調査結果を比較します。

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

フレーマー

• フレーマーは、AndroidとiOSのアニメーションオプションを提供する方法を学びました 。

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

• フロントエンド開発者のSasha Tranは、すぐにCSSでアイコンを描くことにしました 。 彼女はCodepenの全シリーズを手に入れました。

新しいスクリプト

• 検索アニメーション用の一連のスクリプト 。

CSSシェイプ

• 実際にはCSSの形状ではなく、サイトのヘッダーにカーリーアンダーレイを作成する方法 。

ウェブ上の色を操作する

• WebGradientsのWebサイトでは、流行のグラデーションのCSSオプションを提供しています 。

フレックスボックス

• Scott Domesが簡単な言葉で説明した別のflexboxメモ 。

UX戦略と管理

デザイナーの指定

• Jake CausbyとJason Daveyのプレゼンテーションは 、「パラレルダイヤモンド」の優れたモデル（デザイン思考からのダブルダイヤモンドに加えて）を示しており、戦略の形成と製品開発の支援としての私のプレゼンテーションのアイデアと一致しています。
• BasecampのRyan Singerは、インターフェイスの問題を記述する言語を変更するようにデザイナーを招待しています 。 抽象的な「軽い/重い」、「わかりやすい」などの代わりに 彼は明確で具体的なフレーズを提供しています。

デザイン文化の構築

• Corinne Wayshak氏は、デザイナーがさまざまな製品チームのプロフェッショナルを生産的なコラボレーションに関与させ、全体的なデザインカルチャーを向上させる方法について非常によく考えています 。

利害関係者のマッピング

ShopifyのCassie Slackは、影響と関心という2つの基準に従ってそれらを分割するプロジェクトの利害関係者マップを提供します。 結果の4つのカテゴリのそれぞれについて、彼女は生産的な相互作用に関するヒントを持っています。







設計批評の組織

• Denise Spiessensは、Shopifyでのデザイン批判の編成方法について説明しています 。

事例

ケースの再設計

• ケーススタディクラブ、再設計ケースの別のサイトコレクション 。
• Stack Overflowがメインメニューを再設計した方法 。 このようなタスクにデザインスプリントを使用すると、コストが高すぎるか、何らかの単純化されたバージョンを意味します。 しかし、展開プロセスは、分析の研究とユーザビリティテストの結果で非常によく説明されています。

物語

制御盤

Flickrの古いダッシュボードのシックなコレクション。 希少なデバイス、機器、社会技術システムの2300枚の写真。

トレンド

2017年デザイントレンドガイド

BehanceのLoredana Papp-Dinea、Mihai BaldeanおよびMilo Themesからの最も包括的なトレンドレビューのようです。 多くの点で、「ビッグフォント」、「バックグラウンドビデオ」、「アニメーション」と同じように端を発していますが、近年需要が高まっているものはすべてここに集められているようです。







2017年のその他の予測：

• クリスチャン・ベックによる2017年のトレンドの良いパロディ 。

円形設計ガイド

IDEOは、この職業に長い間新しい流行語がないことを決定し、2016年の終わりに循環設計のガイドを開始しました。 私たちは、デザイン思考、持続可能な開発、柔軟で無駄のない方法、そして出来上がりを取り入れます！ -新しいメソッドの準備ができました。 専門家のプロフィールを緊急に更新します。







トピックの続き：

• ヒューバン方法論 。

音声のUX-目に見えないインターフェース

Digital TelepathyのJason Amunwaが音声設計機能について説明します。 CES 2017では、Amazon Alexaを使用するデバイスに大きなブームがあったため、今年は多くのデザイナーが音声アシスタントの設計に直面します。







アルゴリズム設計

• 工業デザイン、アーキテクチャ、および複雑な問題の解決におけるアルゴリズムについてのTEDxでのMaurice Contiによる非常にクールなプレゼンテーション 。
• Pinterestは、Shazam for Photosのリリースを決定しました 。
• グリッドはサイトを更新し 、製品は誰でも利用できるようになりました。 エンジンで作成されたページの例を示しており、Designer NewsとRedditのコメンテーターの最悪の恐怖を裏付けています。 例： andersonpaak.audioおよびyellow.community 。

メッセンジャーとボット

• StanfyのAlina YurchenkoのFacebook Messengerでボットを作成するための視覚的なチートシート 。
• シェーンマックは、ボットと通信するときのナビゲーションへの代替アプローチを提供します 。 RAN（ランダムアクセスナビゲーション）を使用すると、ユーザーを常に自然で頻繁に愚かなシナリオに導くのではなく、柔軟なディスカッションの過程でユーザーの要求をピックアップできます。
• JesúsMartínは、ボット応答ツリーの開発に対する彼のアプローチについて説明しています 。

カーインターフェース

• Dribbbleの自動車インターフェースのコンセプトの選択 。
• ポルシェミッションEインターフェースコンセプトの作者であるデニーモリッツは、 彼の作品をBehanceにアップロードします。 彼のサイト 。

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

• 会話中に感情を判断できる時計アプリケーションの概念 。
• ウェアラブルデバイスは悪化の一途をたどっています。Fitbitは従業員110人を削減しました 。 ジョーボーンはB2B（薬）の大衆市場を去ります。 Apple Watchを含むその他のカテゴリからのAppleの収益は昨年減少しました 。
• GamebandスマートウォッチGameband 。

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

Designers.how

人気のある製品デザイナーツールの教育に焦点を当てた興味深いオンラインコース。 現在、Swift、Sketch、Origami、AfterEffects、Adobe XD、Flinto、Cinema 4Dのレッスンがあります。







UXのキャリアに影響を与えた書籍、パート1-デザイン

UXmattersは、推奨書籍セクションを開始する予定です。 これを見越して、彼らは自分たちのお気に入りのインターフェイスデザインブックのテーマについて多数のコラムニストにインタビューしました。 残りの問題には、ユーザー調査とユーザビリティテストに関する書籍が含まれます。



経験なしで経験を得る方法-新しいデザイナーのパラドックス

リチャード・ヤンは、実際のタスクなしで経験とポートフォリオを獲得する方法について、初心者のデザイナーにアドバイスを提供します。 彼は未承諾の再設計を行うことを助言し、適切なプロジェクトを選択して提出する方法を詳細に説明します。







映画「グラフィック手段」

• 映画ブリアール・レヴィット監督とのインタビュー 。

業界の人々と企業

大企業によるデザインスタジオのショッピング

• アクセンチュアは、ドイツ最大のSinnerSchrader代理店の1つで1億ドルの大株を購入します 。

有名デザイナーの移行と任命

• Googleのマテリアルデザインイデオロギーの1人であるNicholas Jitkoffは、デザインの責任者としてDropboxに移りました 。

スタンフォード・D・スクール

Stanford d.schoolのMediumに関するブログ。 カリッサカーターの教育ディレクターからの最近の記事の1つは、 学生がプロセスの柔軟性を教えられる方法について話しています 。 この記事は、レシピと非常によく似ています。







Dropboxデザイン

• Anisha Jainは、複雑なインターフェイスを使用して優先順位を正しく設定する方法に関するヒントを提供します 。 ユーザーとそのニーズの明確な優先順位付けは、新機能の主要機能と製品全体の体系的なアプローチに焦点を当てています。
• Dropboxカスタムリサーチチームの仕組み

クリエイティブマーケットでのデザイン

• 設計チームの責任者であるGerren Lamson は、インターフェース画面の操作のロジックを記述するためのフォーマット仕様について話します 。 テンプレート 彼の同僚のノア・ストロークスは、テンプレートベースのドキュメントの実際の例を説明しています 。
• Gerren Lamsonは会社の新しいデザイナーのためのリマインダーについて説明します。 これは、設計マネージャーと従業員自身がワークフローと文化を最大限に活用する方法についてのステップバイステップガイドです。

フリップボード設計

Flipboard Medium Design Teamブログ。 2月に、彼らはアプリケーションの新しいバージョンを立ち上げ、その作業について話しました 。







他の設計チームのブログ：

• R / GAデザインチームブログ 。

IBMが設計を通じて未来をどのように受け入れているか

IBMが社内の設計をどのように再考したかについてのもう1つの良い話です。

会議議事録

UX STRAT 2016

2016年には、UXSTRAT 2016カンファレンスの2つのパートが開催されました。 6月4〜5日はアムステルダムで 、 9月14〜16日はアメリカのプロビデンスでした。 戦略の設計に専念し、テーマ別スピーカーの強力なラインアップを収集します。 SlideShareで公開されたプレゼンテーション 。 私はそれらの最も興味深いものを選び出します。

• ジェームス・カルバッハワークショップ「マッピング体験」 。
• Ben Judyは、製品、会社、その使命の3つのレベルでのIntuitのUX戦略について説明しています 。 スライド14および15でダブルダイヤモンドに関するワークフローを編成する非常に興味深い例-彼らはこのモデルをかんばんボードおよびプロジェクト計画と組み合わせました。
• Jon Ashleyの興味深いROIデザインモデルとEPAMのMatt Wakeman 。 彼らは、知覚、財務、運用の3つのセクションでそれを検討します。 それぞれについて、デザイナーが会社をどのように支援できるかの指標が与えられます。
• Microsoft OfficeチームのShikha Desaiは、製品が成長の新しい方向を見つけることを可能にするデザインジャムについて話します 。 これは、いくつかのチームワークプラクティス（ハッカソン、実験、インターン、概念）の組み合わせであり、最終的には製品プランに新しいアイデアを追加できます。
• オランダの金融会社エイゴンのサービスがどのように改善されたかについてのクールなケースミシェルヤンセン Kanoモデルを実際に使用する良い例です。
• INGのKees Moensは、会社のデザインがどのように変わったかについて語っています 。 UX成熟度モデルの実用的な実装。
• GoPro Ha Phanは、ユーザーの調査と実験がシンプルなビデオエディターでどのように役立つかを示しています 。
• マイケルトンプソンは、カスタマージャーニーマップを主要な指標とリンクする便利な例を示しています 。
• ジェフリーオンケンはUX成熟度モデルの段階を通常の顧客旅行マップとして考えることを提案します 。 このフォームでは、優れたデザインの作成を妨げる問題を検出して修正するのがはるかに簡単です。
• ビバリーメイはUXアワードの仕組みについて話します。 たとえば、テストタスクを解析するときに便利な興味深い一連の基準。

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