Vol.236
Better Search Results by Bradley Taunt Jump to heading
より良い検索結果を求めて Jump to heading
検索はインターネット上で毎日行なわれている最も一般的なアクションであり、Bradley氏はここにUI/UXの観点で改善を加えるべきではないかと指摘する。この記事では、DuckDuckGoの検索結果を例にとり、どのような改善の余地があるかについて考察をしていく。具体的には、検索結果のWebサイトがどれほどのページサイズなのか、表示を加えたり、広告の有無、サードパーティスクリプトの有無などを検索結果に追加することで、ユーザーがどのサイトに訪問するか決定するのにあたって非常に有益であると話す。
Faster Image Loading With Embedded Image Previews by Christoph Erdmann Jump to heading
埋め込み画像プレビューを用いた画像読み込みの高速化について Jump to heading
埋め込み画像プレビュー(EIP)のテクニックを使用し、画像のプレビューを表示しつつも、高速に画像データを読み込むことができる。この記事では、プログレッシブJPEG形式の画像をAjaxで範囲を指定して読み込み、その後そのデータを破棄せずに、画像全体を読み込むという方法を紹介する。この方法では、低解像度の画像を読み込んでプレビューを表示してから、高解像度の画像で置換する既存の方法よりもハイパフォーマンスを期待できる。またプレビュー用の画像を別途用意する必要もない。プロトタイプはこちら。
Designing for Action: Best Practices for Effective Buttons by Billy Carlson Jump to heading
アクションをデザインする: 効果的なボタンデザインに関するベストプラクティス Jump to heading
この記事では、ボタンのUIに関する4つのカテゴリに別れた14のベストプラクティスを紹介する
- ボタンだと見て分かるようにする
- 重要なアクションとそうでないアクションをビジュアルで分ける
- ボタンはリンクではない
- 1画面には、需要なアクションのボタンは一つのみにする
- ユーザーを混乱させるようなデザインにしない
- 小さい画面では右下に重要なボタンを配置する
- 大きな画面では左下に重要なボタンを配置する
- 文言はシンプルにする
- OKなど曖昧な単語を使用しない
- アクション固有の単語を使用する
- 混乱を招く単語を使用しない
- 次に何が起きるか明確にする
- 破壊的な操作をさせる場合には、小さい画面を使用する
- ユーザーにアクシデントから復帰させる方法を提供する
Two Browsers Walked Into a Scrollbar by Zach Leatherman Jump to heading
スクロールバーについての研究。モバイルやMacでは、デフォルトで “目立たない” スクロールバーを提供し、Macではユーザーのシステム設定が反映されるため、意図しないスクロールバーの挙動が起きる可能性は少ない。しかし、Windowsでは ”目立つ” スクロールバーが表示されることがあり、CSSで制御できる場合や、JavaScriptを用いて解決する必要がある場合がある。Zach氏は、重いJavaScriptの実装での解決を避け、CSSでできる範囲での修正を行なった。
How to do a code review by Google Jump to heading
Googleが提供する、コードレビューのベストプラクティスについてまとめられたドキュメント。コードレビューをする際にはどういったことを念頭に置いて行うのか、何を見るのか、忙しくて時間が取れない場合にはどうするのか、などを紹介する。また、レビューを受ける側としての心得についても。
In Brief Jump to heading
- Curl Cookbook by Peter: Curlコマンドでよくあるユースケースに対応したオプションの付け方についてリファレンス
- Model-Based Testing in React with State Machines by David Khourshid: ステートマシンを使ってReactのインテグレーションテストを書くメリットとその方法について
- Under-Engineered Text Boxen by Adrian Roselli: ユーザーフレンドリーなtext inputまたはtextareaを実装するためのアイディアと、それがどのように作用するのかについて解説する
- All the New ES2019 Tips and Tricks by Laurie Barth: ES2019で新たに追加されるメソッドを紹介
- How to Jest Snapshot Test the Difference by Robin Wieruch: Jestのsnapshotテストを実行し、状態が変わる前と後の差分をとって確認する方法を解説