第2回　スクロールとページングのUIを考える（1）

連載2回目となる今回は、WebページにおけるスクロールとページングのUIを取り上げます。ユーザに最高のUX（User Experience）を提供するためにフロントエンドのUI（User Interface）設計は欠かせません。エンジニア観点から見たUI設計思想について語りたいと思います。

UIの基礎知識

最適なUIというものは、表示するデータの性質や利用者の使い方、使用しているデバイス、慣れによって変化していきます。

「万人にとって普遍的で、そこそこ使いやすいUI」を目指すべきなのか、あるいは、「⁠一部の人にとって最高に使いやすいUI」を目指すべきなのか。UIを設計する人それぞれでポリシーは異なるでしょう。

誰でもそこそこ迷わずに使える優等生的デザイン。最初はとっつきにくくても、慣れれば最速で使える奇抜なデザイン……。一口にWebページのUIと言っても多種多様です。

たまにしか使わないサイトやサービスであれば、常識や慣習に従いおかしなことをしないほうが学習コストが低く済むため、メリットが大きいということになります。

ユーザビリティ研究の第一人者であるJakob Nielsenはこんなことを言っています。

ユーザはそのほとんどの時間をほかのサイトで過ごしている

ユーザはあなたのサイトのために、わざわざ使い方を学習したくはありません。ほかのサイトと同じように機能することを期待するものです[1]⁠。

一方で、

毎日繰り返し使う
何か明確な目的がある
学習コストがかかってもそれを取り戻せるだけの明確なメリットがある

上記の条件をどれか1つでも満たすサイトの場合、目的特化型のインタフェースが求められることになります。

すでに普及しているUIは「慣れ」によってプラス方向に補正されるのに対して、奇抜なUIは慣れるまではマイナス方向に補正されてしまいます。そのマイナス方向の補正を上回るだけの、明確なメリットを提示できないのであれば、それは単に奇抜なだけの使いにくいUI、ということになってしまいます。

UIの標準化

ところでWebの世界を観察していると、FirefoxのGreasemonkeyスクリプトやブラウザ拡張機能として提供されていたものが、徐々に標準のUIとして採用されていく様子をみることができます。

ごくごく少数の人しか知らなかった秘密のUIが市民権を得ていく。慣れなければ使いづらかったものが、やがて当たり前になることで抵抗が薄れ、ユーザに受け入れられていくということです。その状態になるまではマイナス補正がかかった状態で戦わなければなりません。

長い年月を経て標準的で当たり前のものとして受け入れられていくUIも、最初は奇抜で見慣れないものです。奇抜なものとして廃れるUIなのか、それとも次の標準、当たり前のUIになるのかは長い時間をかけて決まっていきます。

OSが提供する標準的なUIのコンポーネントやフォーム、ナビゲーションは、標準的なデザインの作法というものがあるのに比べ、Webデザインは自由度が非常に高く、既存の作法よりもまったく新しい「真に使いやすいもの」が次の標準になる可能性を秘めています。

一部のギークにとっては当たり前で便利に使われているものを「受け入れられるわけがない」と諦めてしまうのではなく、いかにして「一部の人にとっては最高」のユーザ体験を一般のエンドユーザにも浸透させるかということをUI設計側は考える必要があります。

UI研究者や発明家といった人たちは、そのUIが今現在世間に受け入れられているか、実用化されているか、普及しているかどうかを抜きにして、まずは自分にとって「使いやすい状態」とは何であるのかをきちんと考え妥協しないよう、常日頃心がけているものです。これはUIを考えるエンジニアにも大事な心がけです。

データの解放とUIの多様性

UIを考えるうえで大切なことは多様性であると筆者は考えています。データに対してユーザが自由にアクセスできる環境、そしてUIを選択可能にして、ユーザ側で拡張やカスタマイズを行ったり丸ごとすげ替えられるような環境、そんな多様性が重要です。

もし、あるデータに付随して提供されるUIが1種類しかないのであれば、100％の人にとって80点となるUIを作り上げることが正解だと考えています。

しかし、データとUIが疎結合[2]であれば、20％の人にとって100点のUIを5種類提供するといったことが正解に近いでしょう。さらに言えば、100％の人にとって80点のUIよりも、各々の目的にあった100点となるUIのほうが完璧ですし、将来的に生き残りやすいUIだということは間違いありません。拡張やカスタマイズができるように自由度の高いUIを整備することは、各々にとって100点となるUIを提供することへの道すじです。

「どちらのほうが正しいUIか？」と迷ったとき、それなりの正しい解というのはあるでしょう。しかし、「⁠迷うならばユーザにカスタマイズできるようにせよ」「⁠データを解放してUIを交換可能にせよ」というのが圧倒的に正しいのです。