Kitchen Storiesのマイクロインタラクション

2018年7月26日 16:28

今回は3回目、キッチンストーリーというアプリです。

キッチンストーリーとは
一言で言うとおしゃれな料理が作れる、楽しめるアプリです。
https://itunes.apple.com/jp/app/kitchen-stories/id771068291?mt=8

今回も簡単なおさらいとして、
マイクロインタラクションはこの4つの構造があります。
1.トリガー (ex ボタンを押す、ユーザーのアクションを促すこと）
2.ルール (ex ボタンを押した後なにができるのか)
3.フィードバック (ex ルールを理解してもらえるような動き)
4.ループとモード (ex どのような条件で繰り返すかのループ、ルールが2股以上になったときのモード（機内モードや設定画面など機能性の問題） )

今回もこちら4つの構造に当てはめて考察してみたいと思います。

1.いいね
トリガー：ハートを押した時。
ルール：　いいねに登録される。
フィードバック：Taptic Engineと花火のような大きいアクション
ループとモード：もう一度押すといいねを解除

2.いいね2
トリガー：写真をダブルタップ。
ルール：　いいねに登録される。
フィードバック：Taptic Engineと花火のような大きいアクション
ループとモード：もう一度押すといいねを解除

3.人数分の材料
トリガー：＋−ボタンをタップ・
ルール：　人数分の分量がわかる。
フィードバック：リアルタイムに分量のみ変更していく。
ループとモード：＋−ボタンで人数分を調整。

4.買い物リスト
トリガー：買い物リスト追加ボタンをタップ。
ルール：　調理する食材の買い物リストページ表示。
フィードバック：画面が切り替わり、購入するものをチェックしながら買い物ができる。人数分の分量も調整・
ループとモード：買い物リストに追加されていく。既に入っている商品はエラーとして"このレシピは既に買い物リストに追加されています。"とポップアップ表示される。

5.タイマー
トリガー：テキスト内にある時間をクリック（リンク色緑）
ルール：時間が測れる。
フィードバック：ポップアップでiOS標準のタイマーが表示される。
ループとモード：キャンセルボタンと開始ボタンで制御。

6.検索（フィルタ）
トリガー：ボタンをタップ
ルール：検索結果がわかる。
フィードバック：カテゴリーがカレント表示になり、リアルタイムで検索結果数が表示されている。
ループとモード：結果があると数が表示され、ないと0表示になる。

7.ページネーション
トリガー：横スライド。左右タップ。
ルール：調理のボリュームがわかる。
フィードバック：スライドと連動し、下のグレーの四角に色が付く。
ループとモード：ページを進むと色が付き、戻るとグレーに戻る。

8.調理のワンポイント表示
トリガー：電球ボタンをタップ。
ルール：調理のワンポイントやヒントをテキストや動画で教えてくれる。
フィードバック：モーダルで表示される、動画はautoで再生、タップで拡大。
ループとモード：×マークか黒透明の背景を押すと戻る。

まとめ
とても便利な機能がたくさん詰まったいいアプリだなと思いました。
タイマー表示などアプリ内で完結でき、調理をしながらストレスなく楽しく調理できることに重きをおいたアプリと感じ取れました。写真も動画も綺麗で、特に買い物リストと人数分の分量はとても便利です。

---

つみきでは一緒に働く仲間を募集しています。アプリやWebサービスが好きな方、UIが好きでじっと観察してしまう方、お話ししましょう。

この記事が気に入ったらサポートをしてみませんか？