108Sharingのデモサイト(本体パッケージ)のUIを改善しました

デモサイトがパワーアップしました




108Sharingのデザイナー担当です。今回は108Sharingのデモサイト(本体パッケージ)のUI改善を行ったので、具体的に何を改善したのかをご紹介します。

デモサイトはこちら https://demo.108sharing.com/


1.デザインシステムの導入


今回の改修でデザインシステムを標準に搭載しています。厳密にルールを定義することによりブランドやUIの統一感を保ちます。色弱のチェックなども行い、よりインクルーシブなプロダクトを目指すことを目的としています。


2.「角を取る」ことでよりユーザーに親しみを持たせる


画像やセクションの区切りとなるエリアの角の処理を丸くすることにより、ユーザーにやさしい印象を持たせより親しみを感じさせるデザインを導入しています。こちらは標準搭載でデザインのカスタマイズも可能となっています。


3.ボタンの配置順序の統一


キャンセル、いいえ、修正などのボタンは左に、送信・決定などのアクションを右側に配置し、明瞭で識別可能なプライマリーカラーでユーザーに正しい結果を導くよう促します。こちらのダイアログボタンのガイドラインはAppleやGoogleと一緒ですね。


4.入力フォームの改善


以前のUIでは左側にラベルがあり、入力欄は右側に配置されていました。この配列だとユーザーは左から右へと目線が流れるので、目線の動きが大きくなり、見づらくなります。改善後のフォームはラベルを入力フォームの上に配置することにより、目線が上から下へ垂直方向に流れるのでより入力しやすくなっています。また、この構造だとモバイルでレイアウトが崩れにくくなるというメリットもあります。

108Sharingは機能やUIの改善を常に行っております

108SharingではPMやエンジニア、デザイナーがお互いアイデアを出し合い、顧客により良いプロダクトを提供できるよう本体パッケージのUIや機能アップデートを常に行っております。導入実績多数の経験豊富なチームでよりクオリティの高いサービスをお客様と創っていくことを目的としています。


コメント