| 「操作しやすい」を表現するデザインの技…4 | ||
| → | ページ遷移のないタブメニューで 操作しやすくする |
|
| GOOD | JavaScriptを使ったタブメニューにする | |
 |
||
|
見た目ではわからないが、JavaScriptを使ってタブをクリックすることでコンテンツを切り替えられるように設定している。ページ遷移のないタブメニューは、ユーザビリティを高めたい場合に効果的だ
|
||
| BAD | ページ遷移が発生して起こる ロード時間はユーザーのストレスに |
|
 |
||
|
通常のタブメニューは別ページにリンクされているため、ページの遷移が発生してしまい、読み込みが完了するまで待たなければならない。また、目的の場所まで再度スクロールする必要もあり、不便だ。特にコンテンツが複数あるWebサイトを閲覧する際は、ロード時間が多くなってしまい、すぐにコンテンツを楽しめない
|
||
コンテンツが増えれば、リンクやページも増加してしまう。しかしその場合でも、ユーザーがストレスなく使える操作しやすいページにしたい。そこでお勧めなのが、ページ遷移のないタブメニューだ。JavaScriptを使ってタブを切り替えることで、ユーザーの待ち時間を少なくし、ストレスを感じさせないインターフェイスを実現できる。何の設定もしていない通常のメニューの場合は、別ページにリンクしてしまうため、ある程度ページのロード時間を待たなければならない。ページ内にある複数のコンテンツを見たい場合、毎回ロード時間を待たなければならず、とても不便だ。ワンクリックで内容を切り替えられる、ページ遷移のないタブメニューを実装しよう。
INDEX
多くのユーザーが求める「操作しやすいデザイン」とは？
ユーザーインターフェイスを工夫するために、設計を理解する
「操作しやすい」を表現するデザインの技
→技1 クリック可能な部分と不可能な部分を区別して操作しやすくする
→技2 わかりづらい言い回しや類似したアイコン・ボタンを排除する
→技3 クリック可能領域を広めに設定して操作しやすさを向上させる
