見出し画像

最新UI  2020 /  画面遷移はもう古い

こんにちは。こんばんは。初めまして。お久しぶりです!。

本記事では、自分で見返す用として、またUIを向上させたい人の少しでも役に立つように、自分なりの考えを共有したいと思います。文章を書くのはあまり得意ではないので、文の読みずらさは多めに見てください。


スマホ画面の巨大化

ここ数年で、スマートフォンのディスプレイが巨大化してきました。これによって、より大きな次元に従ってUI設計をする流れに来たと言えます。

大画面用にUIを設計する場合、設計者はユーザーがディスプレイ内を移動する方法を再考する必要があります。
今回は、大画面化によるUXへの影響と、解決策について書きたいと思います。


大画面がUXに与える影響

・初期のiphoneとiphone11 Pro Max

スクリーンショット 2020-03-03 18.36.35

初期のiphoneと最新iphoneのサイズ比較です。
Appleの最新型であるiphone11 Pro Maxは,初期のiphoneと比べて画面サイズ2倍近く大きくなっている事が分かります。この大画面スマホで快適なUXを実現するには、親指で簡単に操作できる大画面操作の設計に集中する必要があります。


「親指ゾーン」を意識する

75%の人々は親指を主に使用し、49%は片手で握ることを好むそうです。しかし、片手でほぼ7インチの画面スペースをカバーしようとすると、親指に大きな負担がかかります。

画像2

Image credit: Luke Wroblewski

そこで、重要なコンテンツとUI要素を中央または画面の下部に配置することで、ユーザーは大画面デバイスでアプリを片手で操作しやすくなります。
その為に、例えば今までの画面遷移ではなく、モーダル遷移を活用していくべきだと思います。


モーダル遷移

モーダル → モーダルへの遷移は従来非推奨でした。現在の位置関係が判らなくなりやすい為です。しかし、最近は多くのアプリでモーダルが多様され始めています。

画像3

上記の画像では、全ての操作が下半分でできるようになっています。操作性を考えると、いかに画面の下半分だけで操作できるようにするかがUXを大きく変えるでしょう。

ユーザーに対して、「押しにくい」「指が届かない」「片手で操作できない」と意識させることはユーザにストレスを与え、ユーザーの離脱に繋がります。

アプリをデザインするときには、今までの常識に縛られず、いかに操作性を向上させるかに焦点を当ててアプローチする必要があるのではないでしょうか。

--------------------------------

短い記事でしたが最後まで読んでいただきありがとうございました。

いいね押していただけるとモチベーションの向上に繋がります。よろしくお願いします。様々な意見も待っています。是非コメントください。

Twitterやってます。よければフォローして下さい。☺️


提供中のアプリです。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

noteを読んでいただき、ありがとうございます。 興味を持って頂いた方は、サポートしていただけると大変嬉しいです。

読んでいただいて嬉しいです!
16
NectAI, Inc創業メンバー。 名古屋の国立大に通っている大学2年生です。簡潔な文章を心がけています。 少しでも僕の記事がお役に立てば幸いです。 https://apps.apple.com/app/id1476227529

こちらでもピックアップされています

写真使ってくれた方々のnote
写真使ってくれた方々のnote
  • 3471本

写真ご使用ありがとうございます!アイキャッチ使用記事を随時追加中!販売中写真を「みんなのフォトギャラリー限定で無料使用可」としています。※ダウンロードでの使用/note外での使用はご遠慮下さい。リンク記事に大体販売先掲載してます。※ごく一部「明らかに公序良俗に反する内容」への写真使用がありますが言うまでもなくNGです。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。