『現場の「あるある」から学んだ今すぐ使える「UIデザイン」41の法則』 佐々木祐真、直原杏花、岩本あかり、大林志帆・著 株式会社アイスリーデザイン・監修 vol.6767
【必読。】
http://www.amazon.co.jp/exec/obidos/ASIN/4798189928
コロナ中のDXブームもあり、全国でデジタルトランスフォーメーションが進んだわけですが、実際に使ってみると、インターフェースが使いやすいものと使いづらいものが明確です。
やはり、発注元の指示によって、また業者さんによって、ユーザーインターフェース(UI)の使い勝手は大きく変わるものだと痛感しています。
かつて土井が在籍していたアマゾンは、こうしたUIのテストを頻繁に行う会社で、UIが変わると、コンバージョンレートが大きく変わることに驚いた記憶があります。
本日ご紹介する一冊は、昨今のビジネスの成否を握るこの「UI」の改善のヒントを示した一冊。
著者は、UX/UIデザインに詳しい株式会社アイスリーデザインの執行役員兼デザイン部部長の佐々木祐真さんと、同社デザイン部所属のメンバーです。
内容は大きくPART1、PART2に分かれていて、PART1では、飲食店の注文管理システムを通じて、業務支援システムUIの基礎知識が学べます。
マーケティングに役立てたい多くの経営者、マーケターの興味は、おそらくこちらになるでしょう。
ユーザーにスムーズにアカウント登録をしてもらうにはどうするか、初めてプロダクトを利用するユーザーに使い方や機能を伝えるにはどうするか、じつに細かい点まで言及しています。
開発に直接携わる方はもちろん、開発現場に指示をするマネジャーにとっても、どうすればUIが改善できるのか、どういう指示を出せばいいのかが明確になる、ありがたい内容です。
後半PART2は、従業員の評価管理システムを通じて、複雑な機能を使いやすくデザインするポイントを学ぶパートですが、こちらも例は地味ながら、UIで押さえておくべきツボを、的確に指摘しています。
直感的に理解できるUIを通じて、売上も従業員の生産性も上げてしまおうという、意欲的な内容。
これを開発者、デザイナーだけに読ませておく手はありません。
ぜひ、経営者自身が学んでチェックし、改善の指示を飛ばせるようにしておきましょう。
さっそく、本文の中から気になる部分を赤ペンチェックしてみましょう。
—————————-
「使いやすさ」とは
・迷わずに操作できること
・操作にかかる手間が少ないこと
・操作によって自分の意図通りの結果が得られること
10のユーザビリティヒューリスティクス
1.ユーザーに対して「システムが今どういう状況なのか」を伝える
2.ユーザーにとって見慣れない見た目や専門用語を使わないようにする
3.ユーザーが行動を中断するための導線をページ内に設ける
4.プロダクト内では一貫性を持たせ、ユーザーが慣れている見た目や操作方法を取り入れたほうがよい
5.エラーを未然に防ぐために、エラーがそもそも発生しづらくなる仕組みをつくる
6.ユーザーには選択肢を示したほうがよい
7.ユーザーの成熟度に合わせて機能を提供する
8.UI上の情報は適切に取捨選択し、見た目を整える
9.ユーザーにとってわかりやすい言葉でエラーの内容を明記し、解決策を提案する
10.ユーザーのためのヘルプドキュメントを用意する
情報の区別は「色の違い以外」で伝える
重要な情報は固定し、常に見えるようにする
ユーザーはなぜ今の画面にいるのかわからなくなってしまうことがある 常に現在地を認識できるようにする
手入力は自由度が高い分、ミスにつながりやすい
デフォルト値はユーザーの実態に合わせる
内容が予測できるフォームのサイズだと、ユーザーの行動が自然と促される
「カルーセル」とは、複数のコンテンツを横一列に並べて表示するコンポーネントです。もとは「回転木馬」を指す言葉で、画面内に収まりきらないコンテンツを左右に動かして順番に表示できます。画面の縦幅を取らないので、多くの情報をまとめてスッキリと見せる効果があります
ユーザーは思っているほど正確にタップやクリックをしません。そのため、ターゲットサイズ(認識対象となるエリアのサイズ)は要素の見た目上の大きさよりも広く設定する必要があります
誤タップを防ぐ最小サイズ
7mmー10mm四方のサイズ以上
スクロールが可能であることを視覚的に伝える
「XXXX/XX/XX」とスラッシュを入れて区切るだけで、多くの人は慣習的に「日付が表記されている」とわかるようになります
矢印のような形をした「>」のアイコンは「シェブロン(Chevron)」と呼ばれ、方向性を示唆するボタンやリンクによく用いられます。この矢印アイコンは、ほかのアイコンとは少し異なる性質を持っており、テキストの左または右に置かれます。右向きのシェブロンは右側に置かれ、次のステップに進むことを連想させます。左向きのシェブロンは左側に置かれ、前のステップに戻る感覚を与えます
—————————-
現場で実際にユーザー行動を観察し続けてきた著者だからこそ書けた、実践的な一冊だと思います。
UI改善のコツが、「惜しい」例と共にビジュアルで示されていて、じつにわかりやすい。
自社のサイトやアプリ、端末のユーザーインターフェースを見直したい方、アウトソース先の仕事をチェックしたい方は、ぜひ、読んでみてください。
———————————————–
『現場の「あるある」から学んだ今すぐ使える「UIデザイン」41の法則』
佐々木祐真、直原杏花、岩本あかり、大林志帆・著 株式会社アイスリーデザイン・監修 翔泳社
<Amazon.co.jpで購入する>
http://www.amazon.co.jp/exec/obidos/ASIN/4798189928
<Kindleで購入する>
http://www.amazon.co.jp/exec/obidos/ASIN/B0FBTRBNB2
———————————————–
◆目次◆
はじめに
序 章 UIデザインとは何か
PART1 飲食店の注文管理システムを通じて、業務支援システムUIの基礎知識を学ぶ
PART2 従業員の評価管理システムを通じて、複雑な機能を使いやすくデザインするポイントを学ぶ
あとがき
参考文献
この書評に関連度が高い書評
この書籍に関するTwitterでのコメント
同じカテゴリーで売れている書籍(Amazon.co.jp)
お知らせはまだありません。