note-title-線引き-_1-serif

インターフェースデザインの線引き


■ インターフェースデザインの線引きとは

インターフェースデザインの線引きとは、世の中にあるUIデザインの事例を大量にリサーチし、ソフトウェア開発の観点から知見を再構築するという取り組みです。私たちはこれを Design Research と呼んでいます。これまで曖昧だったUIデザインのベストプラクティスを、リサーチのケース数という量的エビデンスをもとに構築することで、ユーザーが直感的に操作できる最適なインターフェースデザインが実現出来ると考えています。これまで何となく良いデザイン悪いデザインと定性的に語られてきたUIデザインを、体系的に判断できるように線引きを定義します。


■ 「List と Gridの線引き」してみる

実際に、ListGridを例にインターフェースデザインの線引きを定義してみます。どちらのUIデザインも「一覧画面において、同じ要素を繰り返し表示するカード的なもの」という共通な機能があるものの、アプリやユースケースによって使い分けの判断できていますか?

List
Listはテキストやアイコンを縦方向に向かって要素を並べていくコンポーネント(UIデザイン)です。画像情報より、文字情報が多いニュースやチャットアプリによく見受けられます。以下、メリット・デメリットをまとめました。

Grid
対するGridは、写真やイメージ画像を格子状に要素を並べていきます。SNSや音楽、動画サービスに多く、視覚的に影響が大きいサムネイルが特徴で、整理整頓された印象があります。


■ ListとGridの線引き
二つの役割が似ているUIデザインでも、明確に使用するタイミングやケースを定義することが出来ます。以下の手順を元にListGrid線引きを定義していきます。

1. 何の情報(項目)が必要なのか考える
2. その情報(項目)の表示優先度を決める
3. 優先順位が高いデータが画像or文字を決める

表示したい情報の項目数は一緒でも、情報の優先度、言い換えるとユーザーに何を訴えかけたいかによって相応しいUIデザインは変わってくることが分かります。このようにインターフェースデザインの線引きは、アプリケーションの構築には不可欠な材料だと言えます。


■ インターフェースデザインの線引きの応用

独自のDesign Researchの元に構築したインターフェースデザインの線引きは、以下の様に発展すると考えています。

・量的エビデンスによって、UIデザインのベストプラクティスを瞬時に採用できる
量的エビデンスによって、サービスや業界にあったデザインを構築できる

スマートフォンが登場して以来、個人から企業まであらゆる人々がアプリケーションを介したサービスを作り出しています。初期は物珍しかったアプリも、現在では生活に深く入り込み、一つの社会基盤となっています。時代とともに目が肥えてきたユーザーに対し、今まで以上ににアプリケーションを利用してもらえるように、Queue Interactiveでは引き続きインターフェースデザインの線引きの取り組みを行なっていきます。

この記事が気に入ったらサポートをしてみませんか?