【フリーランス】リモートに強いエージェント5社
フリーランスエージェントのおすすめ30社をランキング 気になる1位は?
50,000円がもらえる!フリーランスエージェントの紹介キャンペーン

オリンピックチケット予約購入の分かりづらさを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系優良就活・転職サイトまとめ
レバテックキャリア
レバテック キャリア

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

Tech Stars Agent

1. エンジニア経験のあるコンサルタントのみ担当!
2. IT・WEB・ゲーム業界特化の専門エージェント
3. 転職だけでなく、独立の支援も行っています
4. エンジニア限定イベントへのご招待も!
厳しい審査を通過した、厳選された求人のみを紹介しているので、
安心して転職を行うことができます。

マイナビクリエイター

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

Web転職する フロントエンドエンジニア
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして週5フルリモートで働いてます。

営業

Webデザイナー(アルバイト)

Webデザイナー(正社員)

フロントエンドエンジニア(正社員)

フリーランスとして独立しました。

詳細なプロフィールはこちらを参照ください。

フリーランスエージェントとは28社と面談・取材してきました。

【完全版】フリーランスエージェント28社面談を受けた現役が比較・おすすめランキングを作った

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

・フリーランスエージェント紹介キャンペーン
・転職やプログラミングの悩み相談
・仕事の依頼

など、各種お問い合わせはこちらからお願いします。

フォローする
hoshilog

コメント

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

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