Vol.228
Frontend design, react, and a bridge over the great divide by Brad Frost Jump to heading
フロントエンドデザイン・React・そして大きな境界の橋渡しをする Jump to heading
Brad氏はデザインと開発の間に存在する、フロントエンドデザインの領域に関して考察を広げていく。それは様々な肩書(UIエンジニアやフロントエンドアーキテクトなど)で呼ばれ、非常に多岐に渡った責任(アクセシビリティの考慮からサイトパフォーマンスなど)を負う役割を持つことを紹介する。また更に、フロントエンドの前側や後ろ側といった分け方をする場合もある点も言及し、Reactやコンポーネント志向の昨今のフロントエンド事情を交えながら、フロントエンドのデザイナとしてどのような想いをもっているか、ワークフローの紹介、そして今後の展望へと繋げていく。
8 tips for writing great usability tasks by Elena Luchita Jump to heading
素晴らしいユーザビリティタスクをつくるための8つのアイディア Jump to heading
良いユーザビリティタスクを作るための8つのアイディアを紹介する。
- ユーザーのゴールを明確に定義する
- シンプルなタスクから始める
- 一度に複数のタスクを与えない
- デザインの流れに従う
- タスクを実行可能にする
- シナリオを設定する
- 明確な指示を与えない
- 最大8つのタスクをテストに含めることができる
Behavior Driven Development (BDD) and Functional Testing by Eric Elliott Jump to heading
振る舞い駆動開発(BDD)と機能テスト Jump to heading
BDDと機能テストについて詳しく解説する。BDDはTDDの派生であり、それが顧客がソフトウェアから得るべきビジネス上のバリューにのみに焦点を当ててテスト設計するもので、ブラックボックステストして動作するべきだと話す。また、機能テストはユーザーの観点からアプリケーションをテストして、ユーザーの要件が満たされていることを確認する必要があり、ブログラマの視点からテストされる単体テストとは異なる、という点を強調する。他にもテストに関しての多くの知見を紹介していく。
Understanding mental and conceptual models in product design by Alana Brajdic Jump to heading
プロダクトデザインのメンタルモデルと概念モデルの違いを解説しながら、それらを考慮しなかった場合に何が起きるか、またどのように強力な概念モデルを作り上げるかについて。
メンタルモデルとは、それがどのように機能するのかについてのユーザーの期待を意味し、概念モデルは、プロダクトがどのように組み合わさり、機能するかについてデザイナによって作成されるものだと解説する。
Slide Jump to heading
UX Improvements For Keyboard Accessibility by Vitaly Friedman Jump to heading
通常のユーザーのアクセシビリティを損なうことなく、キーボードのみのユーザーのアクセシビリティを改善するためのアイディアを紹介する。キーボードでのナビゲーションの場合フォーカスが非常に重要な役割を持つことなど、具体的な内容を紹介しつつも、UXデザインプロセスなどにも触れていく。
In Brief Jump to heading
- Everything You Need To Know About CSS Margins by Rachel Andrew:
margin
について詳しく掘り下げる。marginがぶつかった場合の挙動など - Automatically detect memory leaks with Puppeteer by Christoph Guttandin: メモリリークが起きていないか確認するために行っていた手動のテストを、Puppeteerを利用して自動化する
- The accessibility of placeholder links by Scott O’Hara: aタグとhref属性についてaccessibilityの観点から考察する。プレースホルダリンクを使用する際に気をつけて起きたい点など
- Why Toggle Buttons Are Confusing by Anthony: トグルボタンのユーザビリティについての考察。反転したカラーを使ったデザインは混乱を引き起こす可能性があることについて指摘する
- Deeply Understand Currying in 7 Minutes by Yazeed Bzadough: カリー化について、シンプルな関数を用いてその仕組みと挙動を詳しく解説する