こんにちは、リョウです。
オンラインでサービスを運営していると、どうしても集客やコンテンツ作りに目が向きがちです。
でも実際に長く運営していると、それと同じくらい重要だと感じるのが、
「申し込んだあと、どれだけ気持ちよく使ってもらえるか」
という部分です。
今回、僕が運営しているオンライン英語コーチングサービスで、予約システム全体の見た目と使いやすさをかなり大きく改善しました。
きっかけは、大きなトラブルが起きたからではありません。
むしろ、
「普通に使える。でも、もっと分かりやすくできる」
そんな小さな違和感の積み重ねでした。
今回は、実際にどんなところを改善したのか、そしてこの経験から感じたオンライン事業におけるUX改善の大切さについて紹介します。
予約システムは「動けばいい」ではなかった
これまで使っていた予約システムも、機能としては問題なく動いていました。
講師のスケジュールを確認して、空いている時間を選び、予約する。
キャンセルもできる。
会員ページから予約状況も確認できる。
つまり、システムとしては成立しています。
ただ、長く使っていると少しずつ気になるところが出てきました。
たとえば、
- スマホだと文字が改行されて見づらい
- Open、Close、自分の予約済み枠の区別が分かりにくい
- 予約フォームの見た目が古く感じる
- 有効期限切れなどのメッセージが分かりづらい
- 会員ページの予約一覧がスマホで潰れてしまう
こういった部分です。
どれも致命的ではありません。
でも、毎週何度も使う画面だからこそ、小さなストレスが積み重なります。
そこで今回は、予約システム全体を一度見直すことにしました。
まず改善したのは「予約フォーム」
最初に手を入れたのが、実際に予約を確定するフォームです。
以前は、いかにも昔ながらのWordPressプラグインらしい見た目でした。
そこで、
シンプルで、余白があり、迷わず操作できるUI
を意識してデザインを変更しました。
具体的には、
- フォーム全体の横幅をレスポンシブ対応
- PCでは広く、スマホでは自然な幅に調整
- 入力欄やセレクトボックスを見やすく整理
- 予約ボタンは青
- キャンセルボタンは赤
- ホバー時に少し色が変わる
- カードの影や枠を弱くして、主張しすぎない見た目に変更
といった改善です。
最初はカード型のデザインを強めにしていたのですが、実際に表示してみると、少し「箱」が目立ちすぎました。
そこで影や枠を弱め、
UIを足すのではなく、引く
方向に調整しました。
このあたりは、実際の画面を見ながら微調整していくしかありません。
デザインは、コード上で正しければ終わりではないんですよね。
スマホでは「無理に収めない」という判断も大事
今回かなり改善効果が大きかったのが、スマホ表示です。
特に会員ページの予約一覧では、PCでは問題なく見えていた情報が、スマホだと横幅に無理やり押し込まれていました。
その結果、
「キャンセル」
という文字が、
「キ
ャ
ン
セ
ル」
のように縦に崩れる状態になっていました。
これはさすがに見づらい。
そこで、スマホでは無理に1画面へ収めるのをやめました。
代わりに、
横スクロールできるテーブル
へ変更しました。
さらに、ユーザーが迷わないように、
「→ 横にスクロールできます」
という案内も表示する設計にしました。
これはかなり大事なポイントで、
レスポンシブ＝何でも縮めればいい
わけではありません。
情報量が多いテーブルでは、横スクロールのほうが圧倒的に自然です。
「Open」「Close」「You」の色も見直した
予約スケジュールでは、
- Open
- Close
- You
という状態があります。
Openは予約可能。
Closeは予約不可。
Youは自分がすでに予約している枠です。
もともとOpenは緑、Closeはグレーでしたが、「You」が周囲に埋もれてしまっていました。
実際、生徒さんからも、
「自分の予約済み枠が少し見つけにくい」
という意見をいただきました。
これは確かにその通りでした。
自分の予約は、本来かなり重要な情報です。
そこでYouだけは別系統の色に変更。
今回は黄色＋太字にして、Open、Closeと明確に差別化しました。
こういう改善は、運営側だけではなかなか気づけません。
実際に使っている人の一言が、一番参考になります。
週間スケジュールと月間スケジュールの色も統一
もう一つ気になったのが、
同じ「Open」なのに、画面によって色が違う
ことでした。
週間スケジュールでは緑なのに、月間スケジュールでは別の色になっている。
機能上は問題ありません。
でも、ユーザーからすると、
「これって同じ意味？」
と無意識に迷います。
そこで、Openはすべて緑に統一する方向で調整しました。
UIでは、こうした意味と色の一貫性がかなり重要です。
- 緑＝予約可能
- 黄色＝自分の予約
- グレー＝予約不可
- 赤＝キャンセルや注意
と意味を固定しておくと、画面を見た瞬間に理解できます。
有効期限切れの案内も改善
今回、思わぬところで勉強になったのが、有効期限切れの表示でした。
もともとのシステムでは、
「ユーザーの有効期限内ではありません」
という少し機械的なメッセージが表示されていました。
そこでCSSだけで文言を書き換えようとしたところ、問題が発生しました。
有効期限が切れていないユーザーにも、
「有効期限が切れています」
と表示されてしまったのです。
原因は、CSSで元のメッセージを非表示にして、固定文言を強制表示していたことでした。
つまり、
見た目のCSSでロジックまで擬似的に上書きしてしまっていた
わけです。
ここはかなり良い学びでした。
最終的には、
- 状態判定はJS
- 見た目はCSS
と役割を分けました。
そして、本当に期限切れの場合だけ、
「現在、有効期限が切れているため予約ができない状態です。」
と表示。
さらに、
PayPal決済の場合
更新日当日、引き落とし後に自動で有効期限が更新。
銀行振込の場合
更新手続き後に有効期限が更新。
という案内も追加しました。
エラー表示は、ただ「できません」と伝えるだけでは弱いんですよね。
次にどうなるのかまで伝える。
これだけでユーザーの不安はかなり減ります。
「予約しました」が赤だった問題も修正
予約完了時のメッセージにも、小さな違和感がありました。
「予約しました」
という成功メッセージなのに、赤いアラートで表示されていたのです。
赤はどうしても、
- エラー
- 注意
- 失敗
という印象があります。
そこで、
予約成功＝緑
へ変更。
一方で、
キャンセル＝赤
はそのままにしました。
こうした細かい色分けも、ユーザーが考えなくていいUIにつながります。
CSSを触るほど「影響範囲」が重要になる
今回かなり感じたのが、CSSは便利ですが、書き方によっては想像以上に広い範囲へ影響するということです。
たとえば、
#reservation .alertのように広く指定すると、
- 有効期限切れ
- 予約成功
- キャンセル
- その他エラー
すべてに同じデザインが適用されてしまいます。
そこで最終的には、
.is-expired.is-success.is-cancel
のように状態ごとのクラスを付けて、対象を限定しました。
オンラインサービスを自分でカスタマイズするときは、
「動いた」よりも「他を壊していないか」
を見ることのほうが大事かもしれません。
生徒さんの一言が、改善のヒントになる
今回の改善で特に印象的だったのは、実際のユーザーからのフィードバックです。
「Youが目立ちにくい」
という一言。
運営側では毎日見ている画面なので、慣れてしまっています。
でも、ユーザーは違います。
一瞬で理解できなければ、それは使いにくいUIです。
オンライン事業では、つい新しい機能を追加したくなります。
でも実際には、
すでにあるものを少し見やすくするだけで、体験はかなり変わる
と感じます。
ノマドだからこそ、オンライン事業の「仕組み」を育てる
僕は海外を移動しながらオンラインで仕事をしています。
だからこそ、できるだけ、
「自分が常に説明しなくても回る仕組み」
を作ることを意識しています。
予約画面が分かりにくければ問い合わせが増えます。
エラー表示が分かりにくければ、ユーザーは不安になります。
スマホで見づらければ、予約そのものが面倒になります。
逆に、
システムそのものが説明してくれる状態
を作れれば、運営側の負担も減ります。
これはノマド型のオンライン事業にとって、かなり重要です。
今回感じたこと
今回の予約システム改善を通して、改めて感じたのは、
オンラインサービスは「中身」だけでなく「触り心地」も商品
だということです。
どれだけ良いレッスンやサービスを提供していても、
予約しにくい。
見づらい。
何が起きたか分からない。
これだけで体験全体の印象は落ちます。
反対に、
「迷わない」
「分かりやすい」
「気持ちよく操作できる」
というだけで、サービス全体の印象はかなり変わります。
今回の改善は、派手な新機能ではありません。
でも、こうした細かな改善の積み重ねこそ、長くオンライン事業を続けるうえでは大切なんだと思います。
まとめ
今回行った改善は、大きく分けると以下のようなものでした。
- 予約フォームのデザイン改善
- PC・スマホのレスポンシブ調整
- カレンダー・週間・月間スケジュールの視認性改善
- Open / Close / You の色分け整理
- スマホの予約一覧を横スクロール化
- 予約成功・キャンセル・有効期限切れの表示改善
- ユーザーの声をもとに細かなUXを修正
どれも一つひとつは小さな変更です。
でもまとめて改善すると、サービス全体の「使いやすさ」が一段上がった感覚があります。
オンラインで仕事をしていると、売上や集客の数字ばかり見てしまいがちです。
でも、その裏側にある、
「毎日使う人がストレスなく使えるか」
という視点も、同じくらい大切。
これからも、実際に使ってくださる方の声を拾いながら、少しずつ仕組みを育てていきたいと思います。
The Remote Digital Hubをもっと見る
購読すると最新の投稿がメールで送信されます。
コメントを残す