ウェブのインターフェイスを考察する時、物理的なプロトタイプを使ってみるスタディ

ウェブのインターフェイスやインタラクションを考察する時、モニターから離れてリアルの物理的なプロトタイプでスタディするのもいいよ、という記事を紹介します。

サイトのキャプチャ

Interface Origami

下記は各ポイントを意訳したものです。

はじめに

インターフェイスやユーザーの操作におけるスペースや奥行き感について考えるとき、実際に物理的なものを使って考察することが重要であることに気がつきました。物理的とは難しいものではなく、紙とハサミがあれば誰でもできることです。

紙を折りたたんだり、破ったり、ひっくり返したり、カールしたりすることで、間違いをしたかもしれない解決方法を見出すために試作することができます。
下記に以前作った、よく見かけるインターフェイス・インタラクションの例を紹介します。

Clear & Path

クリアは二つの離れたアイテムをつまむというピンチ操作です。パスは下のコンテンツを表示するためにスライドさせます。

サイトのキャプチャ

左:クリア、右:パス

Accordion

アコーディオンのように紙を折ると、コンテンツを表示するためにリストのいくつかのアイテムを折りたたむことになるでしょう。このトリガーは、ボタンやジェスチャーによって引き起こされます。

サイトのキャプチャ

アコーディオン

Fold & Peel

これらはアコーディオンの隠されたオプションを表示するために利用することができます。もしリストのアイテムの上にオプションを表示する必要があるなら、オプションを手前に表示するためにレイヤーがめくれるようにします。

サイトのキャプチャ

左:ホールド、右:ピール

おわりに

紙を使って、デザインプロセスにどのように貢献できるかの例を紹介しました。コンピュータから離れた作業は、新鮮な視点をもたらしてくれました。

物理的なプロトタイプをつくることは、付加的な利益を与えるでしょう。最終的なデザインではピクセルになりますが、それを超えて探求すべきものが多くあると思います。

top of page

©2017 coliss