とにかく見て実際に試して欲しい.一発でこのUIを使いこなせたなら貴方は凄い,この記事読まなくても良いと思います.
さてUIに係る問題点で感じたことは以下.まあもっとあるとは思う.
JSについてはJS諸賢にお任せします.
問題点
- そもそもメインコンテンツへの入り口が「LOGIN」なのヤバい.
- こんなかんじ.ハイコンテキスト!!!
- LOGINでメインコンテンツに入れると思うのおかしい感じがする.会員制ページと勘違いしてしまう.
- 「LOGIN」しか提示されてないと,その時点でログインしたくないおじさんとかログイン面倒くさいおじさんとかが去ってしまう可能性が高まる
放送後,トップページがこういう感じになるんだけど,まさか「LOGIN」がメインコンテンツへの入り口だとは思うまい.多くの人がどうやって普段のページに飛ぶのか迷うと思う. pic.twitter.com/zt0nDT47rg
— 寸志 (@moznion) 2014, 7月 12そもそも,「LOGIN」がメインコンテンツへの入り口っていうの難しすぎるんだけど,普段はクリックできる対象が「LOGIN」しかないから,暗黙的にLOGINが入り口なんだなってわかるけど,こればっかりは意味不明でしょ……
— 寸志 (@moznion) 2014, 7月 12
- こんなかんじ.ハイコンテキスト!!!
- リロードするとトップページに強制的に戻される,また俺はLOGINを押さなければならないのか
- ナビゲーションバーが異常に使いにくい
- ナビゲーションバーはフィルタリングの役割をするんだけど,グレーアウトとハイライトでフィルタリングされる (つまり要素の出現・消滅ではない) ので,初見では何が起きてるのかがわかりにくい
- 画面外の要素もフィルタリングされるが,見えない部分の要素がグレーアウト or ハイライトするのでフィードバックを得られず,何が起きてるかわからない
- そもそも,すべての要素が一気に出てるの,ユーザは混乱すると思う.最初に提示される選択肢があまりに多いとテンパる
- 1ステップ戻る,みたいな事が一切できない,極めて使いにくい
- 実はアイテムをソート出来るんだけどその機能に気づきにくすぎる
- ここでできる
- ここでできる
- image要素にaltが設定されていないなど,ユニバーサルデザインに対応がされていない
- アクセスするとその時点でコンテンツ (画像とか音声データとか) を全部一気にガッと読むので重い,画面がカク付く (まあこれは実装コストとか考えるとトレードオフかもしれない)
というか俺はオンエア情報を見たかっただけなのに,その情報がどこにあるのかを理解するだけで1分以上かかったの異常としか言い様がない,本当につらい.
結論
- 要素には適切な名前を付けるべき (要は本当に「LOGIN」で良いと思っているのか,というようなこと)
- デザインを優先するあまり使いやすさを犠牲にしない
- ユーザのアクションには適切にフィードバックするべき
- ユーザの期待する動作を 激しく 裏切らない
- 状況に応じて遅延ロードなどをする
- 無理にSPAにしない (!!!重要!!!)
以上です.
その後
アルドノア・ゼロのウェブページいじくりまわしてたら,この異常なUIを手足のように使いこなせるようになってきた
— 寸志 (@moznion) 2014, 7月 12
慣れって怖い
— 寸志 (@moznion) 2014, 7月 12