スマホアプリの仕様変更に伴うボタン配置及びデザインの修正・追加 - foolishlifeさんの提案

スマホアプリの仕様変更に伴うボタ... - foolishlifeさんの提案

 
初めまして。
UX/UIデザイナーの佐藤と申します。
よろしくお願いいたします。

デザインカンプとは別に簡単なプロトタイプも用意しましたので、お目通しください。
https://marvelapp.com/5jdcj3h/screen/48500162

問題文が長い場合のスクロールイメージ
https://marvelapp.com/5jdcj3h/screen/48500165

今回画面を検討するにあたり、まず、下記2点を念頭に置きました。
①コンテンツエリアと広告エリアを視覚的に区別
②コンテンツエリアを「読むエリア」「操作するエリア」で視覚的に区別


−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
①コンテンツエリアと広告エリアを視覚的に区別
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

既存デザインでは、広告エリアと端末の持つ時刻・電波強度・バッテリー残量表示エリアが、コンテンツのベースカラーと同じ色を用いて表示されており、
・コンテンツとの区別がつきづらい
・コンテンツに集中しづらい
という弊害を生んでいると考えます。

そこで、これらのエリアを黒背景とし、コンテンツとの区別をはっきりさせるとともに、ユーザーの視覚(認識)の外に持っていくようデザインしました。


−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
②コンテンツエリアを「読むエリア」「操作するエリア」で視覚的に区別
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

これは既存デザインでもこのように考えられているかと思いますが、薄グレー背景の「読むエリア」と、ブルー背景の「操作するエリア」を明確に区別しました。
操作は画面下部のブルーのエリアに集約します。

ただし、解答表示画面においては、
・1つの文脈の中で表示している内容を切り替える
・文脈を移動する
という操作を区別するため、
問題文と解答の切り替えボタンはタブ型のフロートボタンとしました。
このボタンはスクロールにかかわらずこの位置にあり、いつでも2つの画面を切り替えることができます。


−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
補足
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

■ 2択の場合の選択肢の色

2択の場合の選択肢に「○」「×」が用いられていますが、この場合の「○」「×」は、あくまでも「どちらを選ぶか」の選択肢にすぎず、「○」が安全(または正解)で「×」が危険(または不正解)というような意味を持ちません。
配色設計は意味によってなされるのが望ましいと考えますので、今回は、「○」と「×」から既存の配色を排除し、テーマカラーのブルーで統一しました。
これは、選択肢が3択以上になった場合との整合性という点でも好ましいと判断しました。

■ テキストの行間、各種マージン

既存デザインでは、行間、画面端とのマージンが詰まっており、若干可読性を損なうとともに、窮屈な印象を与えていました。
行間、マージンを広げ、これらを改善しました。

■ 解答画面の解答/問題文切り替え

「今表示していないほうを表示するためのボタン」のみを表示するトグルボタンとしています。

選択肢が2つの場合、2つの選択肢を同時に示すタイプのトグルボタンやタブ型の切り替えですと、「今見ている画面を示す、ボタンであったもの」と「もう一方の画面に移動するための、ボタン」の区別がつきづらいという難点があります。
つまり、3次元世界におけるトグルスイッチの、「スイッチが倒れている側」が画面上のどちらなのかがわかりづらいということです。

視覚的ルールが明確な場合や、3つ以上の選択肢がある場合なら、この限りではないのですが、今回の場合は、「今とることのできる行動のみが示されている」という形式のボタンが良いかと判断しました。


以上、デザインについてご説明しました。
何かありましたら何なりとお声かけください。
ご検討のほどよろしくお願いいたします。

追記 : 2018年10月09日 13:56

ボタン内の文字の太さを調整いたしました。

追記 : 2018年10月11日 12:27

既存デザインに合わせて調整いたしました。
[ 添付ファイル ]※ オリジナルファイルは関連ユーザーのみ閲覧できます (詳しく)
危険物取扱乙4.jpg
危険物取扱乙4_20181009.jpg
危険物取扱乙4_20181011.jpg

この提案者への追加発注用に
新規依頼を作成します

新規依頼

複数人から提案があった場合、新規に直接依頼を作成することで、複数人に発注することができます。
元の依頼と同様の依頼を作成し、に承諾されれば、仕事がスタートします。

※ 元の依頼とは別の新規依頼のため、別途手数料が発生します。
に「複数人に発注するために新規で依頼をたてている」ことを、依頼内容やメッセージでお伝えすると、やりとりがスムーズです。

この提案へのコメント

コメントしませんか?
提案に感想などのコメントができます。コメントには ログイン が必要です
ランサー情報
4
ログインすると、foolishlifeさんに「ありがとう」を伝えることができます。
区分: 個人
職業: Webデザイナー
年齢: 40代前半
実績: 22
場所: 千葉県
認証: 本人確認済 機密保持確認済 ランサーズチェック済 電話確認済
依頼情報
依頼番号: 2119329
状態: 終了
報酬: 14,040
クライアント: yuth
提案状況
公開: 2件
非公開: 0件
提案数: 2件