UIデザイナーもコードを学んでデザイン領域を広げよう。インタラクション篇

UI/UX事業部の鈴木慎吾です。デザイナーの仕事とエンジニアの仕事とディレクターの仕事を行ったり来たりしながらクライアントワークに携わっています。UIデザインするにあたってアプリ実装などのコードが書けて良かったと思う機会が多いので、そんな話を何回かに分けて書いてみます。

コードを学んでから、インタラクションを意識してデザインできるようになった

HTMLのようなマークアップ言語を除いて、僕が初めてコードを学んだのはFlashで使用されていたActionScriptでした。自分でデザインしたWebサイトを実装していく過程で気がついたのは、アプリケーションやWebサイトのフロント実装のコードはすべてインタラクションの連なりとして記述されているという点でした。インタラクションの連なりとは何かということをTwitterを例に説明します。例えばTwitterでツイートするまでの流れをインタラクションとして説明するとこのように表せます。

１ ユーザー：ナビゲーションバーにあるツイートボタンをタップ
２ アプリ：ツイート入力画面をモーダル表示
３ ユーザー：ソフトウェアキーボドで投稿内容を入力
４ アプリ：入力したテキストを入力エリアに表示

上記の一部をSwiftのコードで記述するとこんな感じになります。

// １ ユーザー：ナビゲーションバーにあるツイートボタンをタップ → onTweetButton()を呼び出す。

tweetButton.addTarget(self, action: #selector(onTweetButton(_:)), for: .touchUpInside)

func onTweetButton(_ sender: UIButton){

   // ２ アプリ：ツイート入力画面をモーダル表示
   let viewController = TweetViewController()
   self.present(viewController, animated: true, completion: nil)
   
}

単純に言ってしまえば、こうしたユーザーの行動とアプリからの応答を記述したコードがいくつも連なることで一つのアプリが実装されています。一方、PhotoshopやSketchなどのデザインツールを前にすると、一画面毎のUIやビジュアルの作り込みに意識を取られ、中々インタラクションの繋がりが見えてきません。このことに気づいてから、インタラクションをどのように組み立てるかが僕がデザインする時に重視するポイントになりました。

インタラクションに意識が向いてから、ユーザーの行動や文脈に沿ったデザインができるようになった

インタラクションにおけるユーザーの行動に意識が向きはじめると、ユーザーが行動する際の文脈にも意識が向くようになりました。再びTwitterを例にあげます。Twitterでは投稿しないでおいたツイートが残っていると、投稿画面に下書きを表示するためにボタンが表示されます。

ユーザーは過去に下書きを残していたことを覚えているとは限りません。新しいツイートを投稿する際に過去の下書きに自然と気づき、改めて投稿し直すのは文脈に沿った自然な行動の流れと言えるでしょう。単に下書き機能を設けるだけであればメニューに下書きボタンを追加するだけで済みます。しかしそれではユーザーの行動と文脈を無視した使われない機能が１つ増えるだけです。

画面にボタンを作ると、そこにユーザーの行動やきっかけが生まれます。ユーザーが実際に行動できるかどうかは、それまでの行動の流れやユーザーが置かれた文脈に依存します。そのため、ボタンを一つ増やすだけでも、どこにどのように設置するかはインタラクションをデザインする上でとても重要な決定になります。

だからデザイナーもコードを学ぼう

プログラミングを学ぶとなると、SwiftやJavascriptなどの言語やUIフレームワークの使い方を覚え、１からアプリケーションを作りあげなきゃいけないとい思い気が遠くなるかもしれません。しかしデザイン領域を広げることが目的であれば、必ずしも実際に製品としてリリース可能なアプリを作れるようになる必要はありません。
入門書やオンライン講座でサンプルアプリを一つ作ってみるだけでもデザインするときの視点が少し広がるんじゃないかなあと思います。

次回はマイクロインタラクションのデザインとコードについて書いてみようと思います。