LOGzeudon

名古屋で働いているWebデザイナーのブログです

微妙に違う2択のUIデザインから「正解」を選ぶゲームが興味深かった

微妙に違う2択のUIデザインから正解を選ぶゲームが興味深かった

概要

  • 2択のUIから Select the design that is most correct …最も正しいデザインを選ぶ
  • チュートリアル×3、Easy×18、Medium×18、Hard×18
  • 出題内容と順番は難易度ごとにランダム

これだけ。

cantunsee.space

補足

ググってみたら、Redditにて a game to explain the pain of front-end developmentフロントエンド開発の苦痛を説明するゲーム と呼ばれていました。

www.reddit.com

初回で満点取るのは至難ではないでしょうか…。ちなみに考え込まない限り10分くらいで終わります。

やってみた

f:id:rokuzeudon:20190202104702p:plain
プレースホルダーとアイコンの色の濃さが違う

初回がこれでいきなり心折れそうになりました。
アクセシビリティ的にはコントラスト低いのはNGだよな、でもどれくらいでアウトなのかツール使わんとわからんな…、みたいなことを考えて少し悩みました。

f:id:rokuzeudon:20190202104733p:plain
アイコンの色が違う

うん、違いはわかる。
これも選択基準はコントラストかな…?

f:id:rokuzeudon:20190202104727p:plain
画像の比率?が違う

わかりやすい問題もあります。

f:id:rokuzeudon:20190202104723p:plain
セパレーターの太さが違う

違いはわかる、けど…。基準がiOSであるならば、1pxの方が正しい…??

さて、サンプルとして4つ挙げましたが、全部難易度「 Easy 」です。難易度が上がると、バラツキはあれど違いがより些細になっていきます。

結果

f:id:rokuzeudon:20190202105917p:plain

3回目 にしてようやく7580点(3問ミス)でした。

  • デザインの微妙な違いを見分ける観察力
  • 微妙に違うデザインのどちらが適しているのか選ぶ判断力

この2つが求められる気がしましたが、後者に関しては iOSのHuman Interface Guidelinesがベースなのでしょうか(padding周りとか一部設問はそうでもなさそうに思ったり)。詳しい人教えて…。

そのあたりのルールのあやふやさも含めて、 フロントエンド開発の苦痛を説明するゲーム という表現を思い出すとなかなか興味深いです。
「観察力」を養うゲームとしては非常に良くできているので、みなさんもぜひ遊んでみてください。

参考リンク

coliss.com