iPadでUIデザインたのしいねっていう話

time 2020/12/25

この記事はGMOペパボデザイナー Advent Calendar 2020 11日目の記事です
今日はめちゃくちゃ12月25日ですが気にしちゃだめです。

GMOペパボでminneのUIデザインを担当していますやしこです
2019年頃から、iPadを業務に本格導入したらUIデザインがさらに楽しくなりました。

実例として　minne の検索絞り込みオプションを変えたときのお話です

Before

After

解決したい点

１．絞り込み自体の操作

画面に占める領域を圧縮するためにモーダル内部にもう一度プルダウンがあるUIでした
そのためタップ数が＋１で多くなり、
項目の多い絞り込みにおいてやや操作がむつかしい状態でした。

全面モーダルを採用しすべてのプルダウン内に収まっていた項目を展開
また、自分がいまなんの条件でソートをかけているのか視覚的にわかるようにしました。

基本的に検索で絞り込みを使う人というのは「作品をダラダラ眺めていいものがないかぶらぶらする」ではなく「もうすでに買いたいもののイメージがある程度固まっている」人であるという想定のもと結果にたどり着くまでのタップ数を大幅に減らし、目的のものをみつけるストレスを軽減できるように設計しています

２．検索フォーム自体へのアクセスの遠さ

iOS版は検索フォーム自体の設置階層が深く、
タブの探すを押す→右上の虫眼鏡を押す→やっと検索フォームが出てくる→さらにオプションを押す→オプションの中身が展開する→ようやく検索結果が出る
と結果にたどり着くまでのタップ数が多い状態でした

　After

この改修の結果検索フォームへの流入率が大幅にUPし、利用率はあがったけれど
絞り込みソートは継続して利用される（＝ユーザーが絞り込みの操作感の変更が原因で離脱することがなかった）
という結果になりました。よかった〜☺️

この２つのデザインをする際にPapersというiPad専用のメモアプリ+Prottで
ゴリゴリにプロトタイプをつくって検討しました

1.工数が少なく済む

Adobe XD,Adobe Compなどプロトタイプを作るアプリは多々ありますが
圧倒的に手で書いたほうが早いです。ひょいひょい書く。ざくざく書く。
直線ツールがあるためそこまでUIが手書きでも読みにくくなることはないです

あまりに手書きが雑すぎて元の画面と違いすぎるとモックの意味がなくなりますので
– 要素は省略せずに必ず入れる
– なるべく元画像と要素の大きさを似せる
を気をつければあとは自由です

２．幅広い範囲の遷移を初期段階で検討できる

かなり大胆な遷移変更案もつくれるので
夢をもりもりにしてエンジニアさんとわいわいできました

実際フィードバックシートにはたくさんの改善意見が集まりました。
開発後半で遷移の変更がでてくるとかなり苦しくなってくるので
初期段階で意見を吸い上げられたのはとても良い流れでした

また、完成図がみえるために開発メンバーの工数見積がしやすくなります。

3.フィードバックの心理的障壁が低い

デザイナーあるあるですがモックが小綺麗すぎて他職種が違和感に気づけない、
作り込みすぎて壊しにくくなる問題を解決できます。
この下書きスケッチ感が意見を言いやすい、
ここからいくらでも変えてもいいんだという
心理的なハードルを下げてくれる役目があります。

4.たのしい

手でUIいじるのめちゃくちゃ楽しいです。工作感が出る。
粘土こねてる感覚といいますか。いいアイデアが出やすくなる気がします。
アナログの紙とハサミとのりでペーパープロトタイプモックを作るやり方は昔からありましたが
そこをPaperはデジタルの利便性を活かしつつ感覚を相当近く再現してくれる気がします

iPad+Paperでデザイン、たのしいのでこれからもメインツールにします

清書デザインは現在はminneチームはSketch+Abstractメインでやっています。
他のチームメンバーに共有するときはFigmaも併用しています。
当時はZeplinとProttを愛用していましたが他のアプリでまかなえるようになったため変更しました。
FigmaがiPad対応したり、Sketch for Teamsができるようになったりでまた使うツールが変わりそうです。シーンがアツすぎて目が離せません

Paper

https://apps.apple.com/us/app/paper-by-wetransfer/id506003812
UIが直感的で書き心地が最高
純性メモに次いでペンの遅延が少ない気がする。
相当雑に走り書きしてもついてきてくれます
あとペンのにじみ具合がめちゃくちゃ気持ちいい
無料版でほどんどの機能が使えますが有料版になるとコピペができるようになる&ノートの表紙の種類が増えるというどうでもいい追加コンテンツが楽しめます。かわいい。最高。
ノートがぱかぱかめくれるのも意味なくてかわいい