タグ: ユーザビリティ

UI・UXデザイン方面だと”動く”モックアップが作れると大きいなあと以下の記事を読んで思った。

翻訳：Railsを学んだことで私はより良いデザイナーになった

インターフェイスは、動かない画面に貼り付けられた書類の束では決してなく、それは、インプットとアウトプットのフローなのだ。それが本当によいインターフェイスなのかどうかは、自分で使ってみるまで評価は下せないし、使ってみるにはまず作ってみないといけない。正確な評価・判断をしたかったら、実物に勝るものはない。

それまで私たちデザイナーは、動かないモックアップと、いくつかの動く部品を作って、それからプログラマの助けを呼んでいたが、この時の私達は、およそ2ヶ月もの長い期間を、プログラマの手を煩わせることなく、コンセプトの検証や新しいアイデアを実験するためのプロトタイプフェーズに費やすことができた。プログラミングの基礎知識は、私達デザイナーに dance without a partner のための手段を授けてくれる。

動かないモックアップ、例えば、パワポとかペーパープロトの段階で分ることと、シンプルでも実際に動いて機能するモックアップで分ることってもの凄く情報量が違うからのう。

特にiPhoneやiPadのようなモバイルデバイスだと、情報量の違いが100倍ぐらい大きくなるんじゃないだろうか。いや、100倍は言い過ぎかもしれないから、そこは突っ込まないで頂きたいけど。

動くモックアップでわかる情報量の多さ

僕がCakePHPでWebサービスを作ってた時は、まず紙でさささっとUIやら全体のイメージを書いて、その後はパワポに落とし込み、リンクをクリックしたら次の画面に動くようなモックアップを作っていた。

その後、htmlとcssで画面を作り、あとからバックエンドの動きを実装していた。コードを書く前に”実際に動いているような”デモをパワポで確認できて、今でも有効な手法だと思う。

そんなにこった動きとかはしてなかったし、ちょっとJQueryとか使う程度だったので、「うーん、ここの動きが使ってみると使いにくいなあ。」と言って後戻りするようなことはあまり多くなかった。

ところが、iPhoneとかiPadなどのモバイルデバイス向けに作るアプリになってくると、”動くものを実際に触ってみないとわからない”という部分がめちゃくちゃ多い。

最近はだいぶ過去の経験とか、いろんなUIの動きを脳みそにインストールしてきたおかげで、そこそこ実装前でも先が見えるようになってきたかなと思ったりもするけど、それでも触ってみないとわからないことだらけ。

Webサービスでも最近ではJavaScriptガリガリ使って動きを工夫したりするし、HTML5とかでモバイル対応したりしてきたら、もう大変だと思う。

モバイルアプリは使う事でわかることが特に多い

iPhone開発では、iPhoneシミュレーターというPC上で動きを確認できる便利な機能があるんだけど、最近あまり使わなくなった。Xcodeの実機へのBuildが高速になったというのがでかいけど、実機で触らないとわからないことが多い。

まず、手で握って触った時に、ボタンの位置が押しにくいかとか。

アクションボタンをタップしてにょきっと画面が下から出て来て、それを閉じる時に左上、もしくは右上のボタンを押す時に届きづらいから、たまにiPhone落としちゃうとか。

移動中にポケットからiPhoneを取り出し、ネットワークが不安定になった時にどういう動きをするかとか。

寝る前に寝転んで、画面が横画面になった時に、縦画面の時、どういう握り方で持つか、その時の使いやすさとか。

こういう事を検証するには、デザインは全部デフォルトでいいから動くものをささっと作るのが一番。

僕が新しいアプリのUIを検証する時は、アイデアだしの段階で、まずは紙に簡単に書いて、その後コード書いて動かして検証してます。

自分しか理解できないかもしれないLIsgoのUIを考えてた時のメモ書き。

そこから、もうちょっと突き詰めて、自分を第三者の視点で観察するとか、ユーザを観察するとかの話はこちら。

使いやすいiPhoneのUIを作るために気をつけていること

でも、プログラミング覚えるのは大変でしょう？

これは悩むところです。人間の時間は有限だから、各自で一番最適だと思うことに時間を使うしかない。

これができたらいいよー、これもできたらいいよー、この知識があるとないとでは全然違うよーというのは、どれも正論であることが多いですよね。

でも、自分が今やる価値はあるかとか、これから覚える意味はあるかとか、必要になった時に勉強したほうがいいか、他人に任せて自分が得意な事に集中するかは人それぞれの状況に応じて違ってくる。

結局、”これからは英語勉強するべき”とか、”○○もコードが書けないといけない”とか、そういうのは自分でやりたいと思ったらやればいいし、必要でなければやらなくていいと思うのです。

だから、この記事も、そんなもんかと思って読んでくれたらこれ幸いです。

余談ですが、最近はデザイナの定義が広すぎて、デザイナーですと言ってもどれが専門か聞かないとよくわからない。

Tweet