Skip to content

Instantly share code, notes, and snippets.

@umamichi
Created March 9, 2018 07:46
Show Gist options
  • Save umamichi/1ef5a53da5aa98f84539a5d4db9e0aca to your computer and use it in GitHub Desktop.
Save umamichi/1ef5a53da5aa98f84539a5d4db9e0aca to your computer and use it in GitHub Desktop.

人間工学性

人間工学性とは?

人間の肉体的・心理的な能力のどちらにでも見合うようにデザインすること

  • 飛行機のチケット、折りたたんだ時にバーコードが上にくる
  • キッチンタイマー、磁力と重さまで考慮されているかどうか
  • ドレフェスによって典型的な人間の尺度が定義された

エルゴノミクスの基本原則12箇条

「エルゴノミクス」(人間工学)とは、人間(ユーザー)のユーザビリティ(使い勝手)という視点で、モノのデザインを追求する考え方

1. ニュートラルな姿勢で作業する
2. 余分な力を減らす
3. なんでもすぐ手が届くようにする
4. 適正な高さで作業する
5. 余分な動作を減らす
6. 疲労と静荷重をできる限り抑える
7. 圧点をできる限り少なくする
8. ゆとりを持たせる
9. 動き、運動し、ストレッチする
10. 快適な環境を維持する
11. 明快さと理解を高める
12. 労働組織を改善する

これらは、実物の世界に基づいて作られた原則だか、画面上でも重要

ボタンの大きさ

  • 大きいボタンの方が短時間で見つけてクリックできる
    エルゴノミクスの基本原則でいうと、
    なんでもすぐ手が届くようにする 明快さと理解を高めるを満たしている
  • どんなプラットフォームでもボタンは大きくてアクセスしやすいものにしておこう

数ミリ秒が肝心

  • クリック可能エリアはリンクテキストより一回り大きくすること
  • ユーザーがポインタの位置合わせを終えるまで十分な時間を与えること
    hoverしてから数ミリ秒経過してからメニューを開くようにすると、
    ポインタを少し動かしただけで一瞬にして大量のメニューが開くのを防げる
  • hoverが終わったら、0.5秒待ってからメニューをたたむ
  • アニメーションはできる限りすばやく表示、可能なら0.1秒未満におさえたい

ユーザーの目線の動き

  • まずページ全体にざっと目を通し、自分の興味をそそる単語を探す傾向が見られる
  • リストの場合は必ず先頭に重要な単語を!

キーボードでの操作

  • ユーザーはキーボードで操作したがる
  • マウスでもキーボードでも操作できるようにすべき

ゆとりを持たせる

  • ポップアップで他の情報を隠してしまわないように

フォーム入力

こんなフォームは良くない!

  • 「戻る」を押した途端それまで入力したデータがなくなる
  • すぐに入力できない情報を後半で要求される
  • 短い時間制限のあるフォーム

案内係

  • 舞台のホールでは、階段下の柱が人の流れを分散させる役割をしている
  • サイトにおいても分割する役割が重要

おまけ

印刷ボタンを押すためにポインターを動かすとメニューが開いてしまい、重要な情報が隠されてしまう

利便性

マルチモーダル体験

下記に分類される

  • 同一インターフェース内での切り替え → 別のブラウザウィンドウを開く、店内で別の売り場に行く
  • 関連のある複数インターフェースにまたがる切り替え → パソコン画面からスマホ画面へ、別の店に移動する
  • 関連のない複数インターフェースにまたがる切り替え → パソコン画面から印刷物へ

これら3通りの状況は扱い方次第で素晴らしくもなるし、最悪な体験にもなる

悪い例)銀行に電話したのに、さんざん待たされた挙句、オンラインバンキングに誘導され、また電話のかけ直しを要求される

良い例)携帯電話からカーナビにルート情報を転送できる

  • 遠回りさせたり気を散らす物はなるべく少なくしよう!

コンテンツが"王様"ならコンテクストは"王国"

  • ユーザビリティが見事でも、コンテンツがつまらないと値打ちがない
    例)レストランでは、洒落たカトラリー・食器より、美味しい料理を用意したほうが繁盛する
  • 逆に、コンテンツが良くても、それに見合ったコンテクストでないといけない
    例)ホテルのドライヤーと鏡が良い物でも、コンセントが反対側の壁にある

「すぐ手元にある」状態を用意しておく

Amazonでは必要な機能を、同一ページに簡単にアクセスできるように用意してある

3クリックで一巻の終わり

3クリックに必ずしも納める必要はないが、
クリックするたびに目標につ近づくようにする必要がある、そういうUIにしておくと
ユーザーが時間の無駄だと感じることを防げる

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment