グロースハック・改善のメモ帳

Growth Hackやサイト改善、集客、リテンション、収益化、ディレクション、プロダクトマネジメントなどなどを、スタートアップの何でも屋が発信します。

メルカリのオファー機能のUI観察

メルカリのオファー機能

最近、メルカリのオファー機能を発見しました。
買い手側でしか使ってないのですが、初見でもとても使いやすかったのでそのUIを観察しました。

UIの観察

1.利用開始

f:id:HotcakeMiix:20190408220716p:plain:w200
オファー機能が利用できる商品は、「購入手続きへ」ボタンの横に「オファー」ボタンが出ます。 (というか、この「購入手続きへ」っていうマイクロコピーも良いですね。この文言なら、ワンタップで決済が走るとはおもわない!)

オファー画面

f:id:HotcakeMiix:20190408220724p:plain:w200
オファー画面の画面構成は、上から

  1. 画面名
  2. 機能のできることを解説したコピー
  3. 使い方
  4. さらに細かい説明へのリンク
  5. 商品の概要と写真
  6. オファー金額入力欄
  7. 「オファーする」ボタン
  8. オファーの注意点
    になっています。

この画面構成が、シンプルだけどわかりやすいな〜〜と思いました。
画面名~さらに細かい説明へのリンクのところは、最初に目に入る「出品者の方に値引きをお願いしてみましょう」というのでやるべきことを理解できるのが特に良いです。
「お願いができます」とか「これは値引きのページです」みたいなコピーだと伝わらない、「お願いする」というスタンスを伝えているのにも配慮が感じられます。

オファー完了画面

f:id:HotcakeMiix:20190408220732p:plain:w200
オファーが完了すると、先程の「機能の使い方を解説したコピー」の部分だけが変わります。
オファー後に、オファーの注意点やオファーとはそもそも何なのかを細かく確認したくなったときも迷わないのが良いですね。

オファーが拒否された場合

f:id:HotcakeMiix:20190408220710p:plain:w200
オファーが拒否されるとこういう画面になります。
「オファーとは」へのリンク、オファー時の金額、商品概要+写真、商品ページへのリンクと
ここにある情報に無駄も不足もないのが素晴らしいです。

ここまで来てやっと気づいたんですが、黄色の枠ってメルカリ中の人からのメッセージ欄的な位置づけなんですかね。
言葉の選び方的にもそんな感じがします。

提示金額よりも高くしたらどうなるのか?

試しに、元値よりも高い金額を入れてみました。
f:id:HotcakeMiix:20190408220748p:plain:w200

結果、元値より高い金額はNGのようです。

f:id:HotcakeMiix:20190408220754p:plain:w200
NGの表示が出るのはボタンを押下したタイミングと同時なんですが、押下と同時に再度キーボードが立ち上がるのが親切設計だなとおもいました。

まとめ

この他にも、画面の出方とかローディング時のメッセージとかもとても良いので、またメルカリの良いUIがあったらまとめてみようかなと思います。