人とコンピュータの関係を考えると、二者間には常にインタフェースが存在します。本連載では人とコンピュータを介在するインタフェースに着目し、インタフェースとそれらを世に生み出すプロダクト開発について議論します。初学者の方からプロフェッショナルの方まで、何らかのプロダクト開発のヒントを持って帰っていただけるような連載を目指しています。
筆者は、Helpfeelという、Gyazo・Cosense（旧 Scrapbox）・Helpfeelという3つのSaaSプロダクトを提供する会社でCTOを務めています。イベントなどでユーザーの方とお話しさせていただくと、「使いやすいサービスが多い」「独創的ですよね」とお褒めの言葉をいただくことがあります。
当社はテクニカルフェローの増井俊之が発明したシステムをベースに、日々エンジニアが自ら企画し、プロダクトを改良しています。ユニークで独創的なユーザーインタフェース（以下、UI）を実装することもありますが、実は日々の地味なプロダクト開発がそのようなUIを支えています。
本稿では、派手な機能や独創的なアイデアとは真逆の、地味でごくごく「普通」のインタフェースにまつわる議論をご紹介します。
昇順は「∧」？「∨」？
アプリケーションやWebサービスのUIの一つに、リストの昇順・降順を示すUIがあります。WindowsやmacOSでフォルダを開いたときに、作成日時や更新日時でソートするためにクリックする箇所を想像してください。
このUIには、数学における∧（論理積の記号）や∨（論理和の記号）のような、Chevron（シェブロン）と呼ばれる記号が割り当てられています。
さて、問題です。リストが昇順を示す時、Chevron記号は上下のどちらを指すでしょうか？
(A) 昇順を示す時、一般的にはChevron記号は上を指す（∧型）
(B) 昇順を示す時、一般的にはChevron記号は下を指す（∨型）
(C) 一般的にどちらかは決まっていない
・
・
・
答えは実際のスクリーンショットを見てみましょう。
-
WindowsにおけるソートUIの例
-
macOSにおけるソートUIの例
正解は「(A) 昇順を示す時、一般的にはChevron記号は上を指す」でした。みなさんは分かりましたか？
もしかしたら「(B) のように下でもいいじゃないか」「(C)のように決まっていないのでは？」と感じる方もいらっしゃるかもしれません。実は筆者も、このような議論に直面したことがあります。こういった議論に対応が必要な場合は、以下の観点からどのようなUIにするか決定すると良いでしょう。
① 原則は業界標準に揃え、外部一貫性（システムの外側との一貫性）を保つ
② 十分に調べた業界標準に揃える
③ 独自性が必要なUIなのか確認する
① 原則は業界標準に揃え、外部一貫性を保つ
UI設計に際して、業界標準をどう捉えるべきか。ユーザービリティ研究の第一人者であるヤコブ・ニールセン氏による「10 Usability Heuristics for User Interface Design」に言及があります。
==ここから引用==
4: Consistency and Standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Jakob's Law states that people spend most of their time using digital products other than yours. Users’ experiences with those other products set their expectations. Failing to maintain consistency may increase the users' cognitive load by forcing them to learn something new.
4: 一貫性と標準 ユーザーに、違う言葉や状況やアクションが同じものを指すのか疑問に思わせるべきではありません。プラットフォームと業界の慣例に従ってください。
ヤコブの法則では、人々はほとんどの時間をあなたのプロダクト以外のデジタルプロダクトを使うことに費やしている、と述べています。他のプロダクトにおけるユーザー体験が、ユーザーの予想を決めます。一貫性を維持できないと、新しいものを覚えることを強制されてユーザーの認知不可が増加します。
（筆者訳）
==ここまで引用==
ユーザーにとって見慣れていないUIは認知不可の増加を引き起こします。UIは原則、業界標準に揃え、外部一貫性、つまりシステムの外側との一貫性を保つべきです。
② 十分に調べた業界標準に揃える
WindowsとmacOSの標準アプリケーションでも例としては十分ですが、他の類例を探すことでより業界標準であることに確信を持てるようになります。
筆者の場合は、WebのUIフレームワークとして著名なMaterial UIの事例と、ソート機能が重要な機能の一つであるMicrosoft Excelの事例を収集しました。
-
Material UIにおけるソートUIの例
-
Microsoft ExcelにおけるソートUIの例
よく練られたUIフレームワークや、業界標準のアプリケーションを調査することで、より業界標準であることに確信が持てます。
③ 独自性が必要なUIなのか確認する
業界標準を調べた上で、UIに独自性が必要かどうか改めて考える必要があります。ユーザーが見たことがない画期的なUIを提供したい場合、ユーザーの学習コストを上回るユーザーベネフィットが存在するのであれば、独自性のあるUIを提供すべきでしょう。もしそうでなければ、なるべく業界標準のUIを提供すべきです。
筆者がこの議論に初めて直面したのは、当社の従業員専用の管理画面のリストUIでした。当然、独自性のあるUIを作るようなユーザーベネフィットは存在しないので、学習コストの最小化を図り業界標準を採用しました。
終わりに
本稿ではリストのソートUIを通じて、業界標準に準拠すべきかの議論をご紹介しました。派手な機能やユニークで独創的な機能の裏には、このように地味でも使いやすいUIを作るための議論があります。
今回のような議論は、昇順・降順の切り替えといった2値が切り替わる「トグルUI」の問題が影響しているように思います。詳しくは「トグルUI 問題」などのキーワードで検索してみてください。
UI設計は一筋縄ではいかないものですが、本稿がきっかけとなって細かいUI設計も楽しいものになれば幸いです。
