初めまして。
UX/UIデザイナーの佐藤と申します。
よろしくお願いいたします。
デザインカンプとは別に簡単なプロトタイプも用意しましたので、お目通しください。
https://marvelapp.com/5jdcj3h/screen/48500162
問題文が長い場合のスクロールイメージ
https://marvelapp.com/5jdcj3h/screen/48500165
今回画面を検討するにあたり、まず、下記２点を念頭に置きました。
①コンテンツエリアと広告エリアを視覚的に区別
②コンテンツエリアを「読むエリア」「操作するエリア」で視覚的に区別
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
①コンテンツエリアと広告エリアを視覚的に区別
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
既存デザインでは、広告エリアと端末の持つ時刻・電波強度・バッテリー残量表示エリアが、コンテンツのベースカラーと同じ色を用いて表示されており、
・コンテンツとの区別がつきづらい
・コンテンツに集中しづらい
という弊害を生んでいると考えます。
そこで、これらのエリアを黒背景とし、コンテンツとの区別をはっきりさせるとともに、ユーザーの視覚（認識）の外に持っていくようデザインしました。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
②コンテンツエリアを「読むエリア」「操作するエリア」で視覚的に区別
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
これは既存デザインでもこのように考えられているかと思いますが、薄グレー背景の「読むエリア」と、ブルー背景の「操作するエリア」を明確に区別しました。
操作は画面下部のブルーのエリアに集約します。
ただし、解答表示画面においては、
・１つの文脈の中で表示している内容を切り替える
・文脈を移動する
という操作を区別するため、
問題文と解答の切り替えボタンはタブ型のフロートボタンとしました。
このボタンはスクロールにかかわらずこの位置にあり、いつでも２つの画面を切り替えることができます。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
補足
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
■ ２択の場合の選択肢の色
２択の場合の選択肢に「○」「×」が用いられていますが、この場合の「○」「×」は、あくまでも「どちらを選ぶか」の選択肢にすぎず、「○」が安全（または正解）で「×」が危険（または不正解）というような意味を持ちません。
配色設計は意味によってなされるのが望ましいと考えますので、今回は、「○」と「×」から既存の配色を排除し、テーマカラーのブルーで統一しました。
これは、選択肢が３択以上になった場合との整合性という点でも好ましいと判断しました。
■ テキストの行間、各種マージン
既存デザインでは、行間、画面端とのマージンが詰まっており、若干可読性を損なうとともに、窮屈な印象を与えていました。
行間、マージンを広げ、これらを改善しました。
■ 解答画面の解答／問題文切り替え
「今表示していないほうを表示するためのボタン」のみを表示するトグルボタンとしています。
選択肢が２つの場合、２つの選択肢を同時に示すタイプのトグルボタンやタブ型の切り替えですと、「今見ている画面を示す、ボタンであったもの」と「もう一方の画面に移動するための、ボタン」の区別がつきづらいという難点があります。
つまり、３次元世界におけるトグルスイッチの、「スイッチが倒れている側」が画面上のどちらなのかがわかりづらいということです。
視覚的ルールが明確な場合や、３つ以上の選択肢がある場合なら、この限りではないのですが、今回の場合は、「今とることのできる行動のみが示されている」という形式のボタンが良いかと判断しました。
以上、デザインについてご説明しました。
何かありましたら何なりとお声かけください。
ご検討のほどよろしくお願いいたします。
