オリンピックチケット予約購入の分かりづらさをUIの観点から解説

Web転職する
スポンサーリンク
スポンサーリンク
スポンサーリンク
2020年東京で行われるオリンピックのチケット予約の受付が始まりましたね。
自分も便乗してチケットの抽選を申し込もうとしたのですが、どうもわかりづらくユーザーにストレスを与える仕様が一部あったので、ユーザービリティ、アクセシビリティの観点から解説したいと思います。サイト制作に携わってる方やこれから携わりたい方向けに書いてみようと思うので、もしかしたらそういう方に参考になるのではないかなと思います。

分かりづらい9つのポイント

1.購入ページが見つからない

まず数分間、購入ページが見つかりませんでした。

自分は元々ユーザー登録をしていました。

google検索して東京2020観戦チケットのページを開くと以下のようになると思います。

東京2020公式チケット販売サイトへというボタンがあります。

「ん?これがすでに販売サイトじゃないの?」って思ったのとビュレット(>←これのこと)の一なんで左なん?って思ったのですがとりあえずボタン押下しました。

 

先ほど見た「5/28まで」のメインビジュアル再び。さらにカルーセルになってますがこの画像自体はリンクしていません。次の画像に送ってみてもチケットが買えそうな導線(誘導のこと)なし。

下にスクロールするとチケット価格の一覧ページとニュースリスト。。

一体どこで買えるんじゃ~!

となりました。
皆さんお気づきかもしれませんが、どこにあるか瞬時にわかりましたでしょうか。
グロナビに「チケット購入」とあります。しかも微妙な4番目という位置。
ゴレンジャーで言うところのミドレンジャーのポジションですよね。
チケット販売サイトなのでこのサイトに訪れるユーザーは十中八九チケットを予約購入しようと考えてるはずです。TOPの重要なお知らせの下とかカルーセル画像でも購入ページへリンクさせるのが親切ですね。
導線は一個でなければいけないというルールはありません。またこのグロナビで言うと1スクロールでもしたら見えなくなってしまいます
以上の挙げた項目からわかるように、最重要ページであるチケット申し込みの導線が弱すぎですね。
なんならTOPが購入ページでもいいぐらいです。
以下、サイトの重要なページに対しての導線が弱い理由のまとめです。
  • グロナビの4番目
  • TOPコンテンツ内に導線がない
  • グロナビが追従するなどしないので1スクロールでもしたら迷子

2.絞り込みが非リアクティブ

リアクティブとは簡単に言うと変更すると表示が更新されるということです。

チケットを選んでみます。
水泳を選んでみました。

 

この時点で結果は出てきません。

そして検索を押します。

結果が表示されました。
やはりでメダルセッション(引用:メダルマークが付いているセッションは、 メダリストが決まるセッションを指します。)で絞りたいとします。

チェックボックスを入れても、検索結果は変わりません。

その他エリアや協議を変更してもリアクティブでないため検索ボタンを押さないと更新されないのです。
チェックや選択をしただけで表示が更新されればユーザーのアクションが一つ減るのでシームレスです。

3.そもそもなぜ複数選択ができる?

競技を複数選択、所謂チェックボックス化してるのですが、それの意味ないことを気づかされます。
購入の流れとして競技を選択して検索→一覧の表示→一覧の中から選択して購入となるのですが、
競技を2つ選んだところで1種類からしか買えないので複数選択できる意味がないのです。

もし別の競技でかぶっていないか確認したいという声に応えての仕様であれば、そのまま複数一括で購入できる方がいいです。

つまり、

4.一括で買えない

実際自分はそう思っていろいろ選択してしまって一つずつチケットを買うしようと気づいて絶望した。

つまりどうすればいいかというと

  1. 検索結果で出た一覧の競技にチェックボックスを各々つける。
  2. 購入に移りたい場合は購入したい競技をそれぞれチェックして購入ボタンを押させる。

という風にすればよいのです。

5.ラベルが分かりづらい

さらに言うとこの一覧の競技名のリンクが次のステップというのが分かりづらいです。
チェックさせて【申し込み枚数・席を選ぶ】などのボタンが親切ですよね。

6.別タブできない

検索画面を残しておこうと別タブで開こうとしてctrl+クリックするのですが、同タブになっていまいました。

このように通常できる操作ができなくなるのはアクセシビリティ的によくありません

7.内容が記憶されない

枚数・席の画面に行って戻るとすべてリセットされており、先ほど選択した検索結果は残っていません。

こちらにストレスを感じた人も多いはず。

8.買えたのかわからない

これがひどい。。スクショしてないので画像はないのですが、購入すると何もなくTOP画面にいきます。

購入されたのかなと思うと購入はされておらず、自らカートに行くと申込み内容確認ボタンがあり、それで初めて購入になります。

なぜ何の案内もなくTOPに戻されるのかわかりませんでした。

追記:買ったつもりが買えてないという人が続出したそうです。

自分と同じ職種の方でもこのような事態に陥ってしまうので、割と罪深い仕様になってしまってると思います。

9.ステップがない

フォームには決まってSTEPがあって今現在何をしていて次はなにをする?という表示がだいたい上の方にあるサイトが多いです。ユーザーが迷子になるのを防ぐわけですね。
それが購入ページ、枚数・席の画面にありませんでした。

が、なぜかカートにはあるんですね。。

まとめ

以上、UI、アクセシビリティの面からオリンピックチケット予約の分かりづらさを解説してみました。

 

サイトは本当に使いやすいサイト使いにくいサイトが存在していて、ちょっとの気づきが使いやすさに繋がっていきます。

 

今後もどんどん使いやすいサイトは求められると思うので、意識してサイト作っていきましょう!

 

人気転職エージェント

 

 

人気転職ブログ記事

 

【無料】WebIT系優良就活・転職サイトまとめ
Webist(ウェビスト)

Webist(ウェビスト)は大手企業に強いWeb専門の転職サイト&エージェントです。
特徴・メリットは
・30年の実績
・幅広い働き方を推奨
・大手企業多数
・週3案件が多い
・エージェントの質がいい
などなど。
大手Web企業で転職を決めましょう!

ワークポート

元々IT専門の転職サイトだったためIT業界の求人数が約2000社と圧倒的です。
エージェントも質が高く専門性の高いサポートをしてくれます。
オリジナルツール「eコンシェル」が便利。
【IT業界・ゲーム業界】に強い、転職決定人数 No.1です!

レバテックキャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

スポンサーリンク
Web転職するフロントエンドエンジニアレビュー
スポンサーリンク
シェアする
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして企業に週5で業務委託で常駐しています。

正社員からフリーランスになり以下のように変わりました。
・月収 34万→929,346円(最高月収)
・残業時間:最高100時間→0~10時間
・日々の積み上げ:なし→ブログ、筋トレ、プログラミング

このブログでは、フリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

技術ブログはこちら→frontendomemo

関係ないですが、オムレツ作るのが好きです。

プロフィール
サイトマップ

宜しければフォロー、feedly登録くださいm(__)m

フォローする
hoshilog

コメント

  1. […] オリンピックチケット予約購入の分かりづらさをUIの観点から解説 | hoshilog […]

タイトルとURLをコピーしました