ワークショップで学ぶ!モバイルファーストでのコンテンツ整理&プロトタイプ制作(1)を行いました。
参加された方々の(プロトタイプを記載した事が初めてという)経験則の違いなども含めて、ワークショップの進行も考えるべきだと感じましたが、大半の参加者は、「あ〜!!」っと、ヒントを見つけた方、「この方法が最前かも?」「おもしろい!」と感じられた方々だったので開催してよかったと感じる事ができました。
Tweetなどでもコメントを以下のようにいただきました。ありがとうございました。
- 今回はモバイルファーストということで、実際にスケッチをしてみることに。見たことあるけどやったことないので四苦八苦。
- すごくためになったワークショップでしたよ。ありがとうございます! ちょうどタイムリーでスマホ制作が進んでいたので。
- 昨日はお世話になりました。お疲れさまです。ワークショップは気づきが多くためになりました。また次回の開催を楽しみにしています。
■検索などの機能に頼り過ぎてしまう。
スマートフォンという事でリモコン的な感覚になってしまって、検索に頼ってしまうデザインになっている人がけっこういる。と思いました。検索ボックスは一見便利そうなのですが、調べる事ができない方には不便の何者でもありません。想像する簡単な事でモバイルでの入力は面倒だからです。やっぱりクリックが楽です。もちろん、GPSなどを利用したシステムなども存在しますのでシステムに頼るのは場面もありますが、検索に限っては難しい事が多いです。ましてや、その検索システムの性能が良くなければさらに使いづらいものになります。その前になんとかなるデザイン、UI設計をしないといけないでしょう。
■別ウィンドウを考えてしまう。
UI的な問題もありますが、 新世代スマートフォン(iPhone5も)はWiMAXの様な4G回線になり早くなりますが、まだ時期尚早でいきなりJSを使わない設計をするのがベストです。■目当ての商品になかなかたどり着かない
モバイルになると、商品を全て掲載しないと思われる人が4割ほどいた開催になりました。この数値は実は少ないと思っています。今回参加された方は、先進的な考え方に興味を持っている方々が多かったのでこの数字になったのだと思います。しかしながら、全ての商品の導線をつくのははやり苦戦している様ですでした。多くの商品をスムーズに表示できるようにするを考えるIA的な要素も今回は必要だったので大変だったと思います。■新しいUIを編み出してしまう
上記の事から苦戦して、新しいボタンなどを制作してしまう人がいました。ボタンをワンクリックするとAページ、 ダブルクリックするとBページのような。工夫をされている方がいました。これも素敵なアイディアだと私は感じましたが、ユーザーが迷ってしまうインタフェースになってしまう可能性が存在しています。ただ、こういった斬新な発想は私は好きです。(アップルガイドラインに沿っていない可能性もあり)
>上記のような説明をさせていただいたら、納得していただき、喜んでいただいたのでよかったです。
■ 紙で記載したプロトタイプ+ユーザーテストをしていない会社が多い
以外にも紙で記載したプロトタイプを作った事がない人が多くいました。ユーザーテストを実施したとしてもその後で行っているようなので、手直しがあった際の手戻りは大変でユーザーテストの意義もわかっていただけたようです。これらの内容はモバイルファースト以前の事ではありますが、モバイルファーストから制作のワークフローが異なれば良いなと感じました。なかなか日本の制作現場ですぐに実現できないかもですが、手戻りは大変ですのでユーザーテストは必ず行う風潮がつけば良いなと感じました。
■素敵だと思う人のプロトタイプが何名かいました。
私が見せて頂いた方の中に凄く良く出来ている方がいらっしゃいました。昨日の場面で発表などはしなかったのですが、凄く良くできたUIでした。細かく見えてないかったのですが、もしかしたら一番前の男性も細かくプロトタイプを作成していて良くまとまっている感じでした。せっかくなので発表の場面を作るようにしたいなと感じました。■まとめ
以上の事から、モバイルファーストを勉強したくても1日2時間では無理と確信。
(予測は着いていたので、今回は障りだけでも知っていただければと思っていました。)
パソコンサイトまで持っていくワークショップは1日がっつりのものか、10時間以上のワークショップが必要だと判断しました。 現在予定としては以下の項目を今後のワークショップで行っていくつもりです。昨日は、1,2を行ったと思っていただけると良いのかも知れません。
- モバイルファーストのコンセプト理解
- 上記を自分なりに解釈してみる
- プロトタイプの書き方習得
- 解釈したモノをもとにサイト構成、導線を作成
- 全ページのプロトタイプを作成
- ユーザーテストの方法を学ぶ
- ユーザーテストの実施
- 検証結果の手戻り
- パソコンサイトへのデザイン展開(1)
- パソコンサイトへのデザイン展開(2)
続けての参加お待ちしています。