Square OrderのUI
http://blog.brianlovin.com/design-details-square-order-for-ios/
1 comment | 0 points | by WazanovaNews 約7時間前 edited
Squareの提供するハードウェア（カードリーダー & レジ端末）のデザインも美しいと思ったのですが、アプリも負けず劣らずクオリティが高いですね。Brian Lovinが紹介しているテイクアウト注文アプリ「Square Order」の中から、気に入ったUIをピックアップしてみました。
（下記で紹介しているリンク先のビデオは、PCのChrome/Safariでないとうまく再生できないようです。お手数ですが、一見の価値はあるので是非。）
2) Walkthrough
数枚のスライド形式のチュートリアルはもう定番ですが、三枚目のCafeの屋根に乗っている鳥がバウンスしたり、三枚目/四枚目の店員の表情/体の動きが同じバウンスのリズムで反応してたりと、芸が細かいです。
3) Signing up
サインインページで、まずメアドの入力を求められて、入力が完了すると同じデザインの画面のまま、メアドの下にパスワードを入力するプレースホルダーの表示が現れます。最初から全部の入力項目を見せるのではなく、必要なときに必要なものだけを見せる手法ですが、画面が遷移する感覚がなくアクションを続けられるのがよいですね。ちなみにビデオでは、既存のユーザであることはメアドから判別されているので、パスワードを入力する画面には「Forgot yout password?」のリンクがでてますが、自分の端末でメアドを入力した際には、新規ユーザなのでパスワードの入力画面では「アカウントの作成: 規約に同意します。」のテキストが表示されます。いずれのパターンでも同じデザインの画面のまま、必要な情報だけがスライドインしてくるかたちなので、ユーザ体験として非常にスムーズです。
4) First view
選択した商品を表示するページに遷移する際にスピナーがでますが、スピナーの円がそのまま丸い型の価格表示のロゴに変わるデザインが秀逸です。
5) Bluetooth off
選択した商品を表示する画面の上にでた黄色の警告マークをタップすると、Bluetoothがオフになってる旨を知らせる画面になります。こちらも同じデザインの画面の表示内容が変わるパターンなので、ページを遷移させられているストレス感が少なく済みます。ちなみに、位置情報とBluetoothで、商品を注文したユーザが店舗に近づき、店の中に入ってくることを把握するのに利用しているようです。
6) Select an item
選択した商品の価格ボタンを押すと、そのボタンが少し大きくなったかたちで同じ位置に注文ボタンが表示されます。指の位置を変えなくてよいので、スムーズです。
7) Order Detail
注文ボタンを押下すると、画面下からせり上がるかたちでレシートが表示されます。店でレシートを手渡しされるのと近い感覚があるのでよいですね。
8) Modify an order
食事を注文する際に、「パンの種類はどうしますか？」「トッピングは何をのせますか？」と細かく選択しなくてはいけないシーンはありえます。その場合も、3) や 5) のパターンと同様に、同じデザインの画面の表示内容がすり替わる形式が採用されています。
10) Changing detail
携帯番号やクレカ番号を入力する画面においては、入力するキーボードも画面のデザインに合わせたオリジナルものが表示されます。
12) Profile picture
自分の顔写真を登録する際も、端末のカメラと連携するだけでなく、撮影結果が丸い円形の枠の中に表示されます。撮影した四角型の写真画像から円形に表示される部分を選ぶのではなく、最初からアプリ内で表示されるかたちを画面で確認できるよのがよいですね。
13) Scrolling
スクロールする画面は、上部に配置された、色違いもしくはラインで区切られたナビゲーションバーの下にスライドインしていく形式が多いですが、Square Orderの場合は、画面全体と同じ色のナビゲーションバーを使って、統一感をだしています。
14) Add an item
よく注意して見ないと気づかないかもしれません。ショッピングバッグにアイテムを追加するアクションで、画面にショッピングバックの絵が表示されますが、そのバッグに、選択したアイテムを販売している店舗のロゴが追加されてます。
19) Web view
PCウェブサイト版も統一感のあるデザインです。
上記で紹介した以外にも、ビデオ付きで細かくレビューされているので、是非原文を確認してみてください。
#square #ui #デザイン