人とコンピュータの関係を考えると、二者間には常にインタフェースが存在します。本連載では、人とコンピュータの間に介在するインタフェースに着目し、インタフェースとそれらを世に生み出すプロダクト開発について議論します。Helpfeelが、独自のインタフェースを実装しながら、便利さと楽しさを備えたWebサービスをどのように開発しているのかについてお伝えします。
こんにちは。yuisekiです。私はHelpfeelでメディアキャプチャーツール「Gyazo」のプロダクトマネージャー兼ソフトウェアエンジニアをしています。本稿では、Gyazoの設計・開発の中でユーザー観察やイベントトラッキングから得られた、人間の認知と判断や行動、操作に関する知見をご紹介します。
人間は極めて速い
本稿で最もみなさんへお伝えしたいのは、「人間は極めて速い」という知見です。一言で表現するならば、人間はとても「短気」で「せっかち」なのです。
私たち人間は道具を選ぶとき、そして道具を使うとき、とても速く認知し、判断し、行動や操作をしています。こうした人間の性質を観察し、理解し、意識しながらソフトウェアを設計することで、ユーザーにとってわかりやすく、使いやすいソフトウェアを開発できます。
人間の速さの実際
人間がいかに速いかをお伝えするために、WebサイトのファーストビューのUIの考え方を例にご説明します。
・ユーザーは多くの場合、画面を全くスクロールしません
・ユーザーは多くの場合、画面の上部や中央にある目立つ色のボタンをクリックします
つまり、
・ユーザーは多くの場合、スクロールしなければ見えない情報は見ることなく離脱します
・ユーザーは多くの場合、画面の下の方にある要素はクリックすることがありません
こうしたファーストビューの重要性は、デザイナーの方には常識かもしれません。私は、実際にユーザーを観察したりイベントトラッキング情報を分析したりして、ようやくファーストビューが最も重視するべきことの一つだと思い知りました。ファーストビューでユーザーが知りたい情報を確実に伝える、ユーザーがやりたいことを即座にできるようにUIを配置する、ということはとても重要です。
-
Gyazoのファーストビュー
パフォーマンスチューニングだけが速さではない
「ソフトウェアを高速化する」というと、多くの人が計算や通信や描画といった処理の高速化、すなわちパフォーマンスチューニングを思い浮かべると思います。処理の高速化はソフトウェアの速さを求める際の前提であり、もちろん極めて重要なことです。しかし、処理の高速化以外の部分でもソフトウェアを高速化できます。
例えば、先述のファーストビューの場合ですと、計算や通信や描画がいくら速くても、縦長の画面の一番下に知りたい情報や押したいボタンがあったら、ユーザーはそこまで長々とスクロールしなければなりません。これは、ユーザーにとっては遅いソフトウェアになってしまっています。こうした処理以外の高速化のテクニックは、情報のレイアウトだけにとどまりません。
人間の速さを意識して操作方法や画面遷移、インタフェースやインタラクションを設計することで、ソフトウェアをより高速化できるのです。
人間の速さを意識したおもてなし
情報のレイアウトに限らないソフトウェアの高速化のテクニックの例として、最初に「クリックを減らす」を挙げます。Amazonの「今すぐ購入」あるいは「注文を確定する」ボタンをご存知でしょうか？これは、クリック数を減らす最も代表的な事例といえると思います。
商品を買う際に、「カートに入れる」「お名前は？」「ご住所は？」「お支払い方法は？」「お届け方法は？」「お届け日時は？」「本当に購入しますか？」などなど、いくつものボタンを押し、何ステップも画面を遷移しなけければならないECサイトは、いくら処理が速くても遅いソフトウェアというほかないでしょう。
このボタンは以前は、「1-Clickで今すぐ買う」と表示されていました。文字通り1クリックで商品の注文が確定するため、圧倒的に速いソフトウェアと言えます。「1-Click」は、2017年までAmazonの特許でした。より詳しく知りたい方のために、Wikipediaの記事をご紹介しておきます。
-
Amazonの購入ボタン画面例
他にも、ソフトウェアを速くする事例として、「キーボードショートカット」が挙げられます。マウスやタッチパッドによるカーソル移動とクリックは、本質的に認知と行動が速い人間にとって、そもそも難しく遅い操作です。小さいカーソルを画面内の特定の領域内まで正確に移動して、カーソルの位置をズレないように維持しつつボタンを押すというのは、冷静に考えるとなかなか難しい操作ではないでしょうか。
一方で、キーボードショートカットは、一度覚えてしまえば極めて高速にソフトウェアを操作できます。実際に、多くのWebサービスがキーボードショートカットを実装しています。
-
Twitterのキーボードショートカット画面例
-
GitHubのキーボードショートカット画面例
ユーザー体験に注目したソフトウェアの高速化
今回は、画面レイアウトや操作方法に着目して書きました。しかし、その他にもより速くユーザーが知りたい情報を伝え、より速くユーザーがやりたいことをできるようにするためのテクニックがたくさんあります。
一般的には、ボタンや入力欄が多いほど、また、画面遷移や状態遷移が多いほど、ユーザーにとっては遅いソフトウェアになりがちです。言い換えると、速いソフトウェアを開発するためには、「削りのデザインによるおもてなし」が必要です。
ソフトウェアにおいては、
・インタフェースを減らす、無くす
・インタラクションを減らす、無くす
・フィードバックを減らす、無くす
といった削りのデザインが考えられます。
Gyazoにおいても、パフォーマンスチューニングはもちろんのこと、本稿で述べてきたような、真に速いソフトウェアを目指して日々開発しています。あまり目新しいトピックはご紹介できませんでしたが、本稿が、より速いソフトウェアの開発に関して何かしらのインスピレーションを与えられる記事になっていたら嬉しいです。
文：yuiseki
