ページの先頭に戻るリンク | Accessible & Usable
公開日 : 2013年9月4日 (2014年1月7日 更新) カテゴリー : ユーザビリティ ページの先頭に戻るリンク、というのを時々見かけます。ページ内の決まった位置にテキストリンクがあるパターンもあれば、クリック/タップ可能なボタンが浮遊する (スクロールに追従して常に画面上に表示される) パターンもあります。 この、ページの先頭に戻るリンクは、なぜあるのでしょうか？「ページの先頭には、グローバルナビゲーションや機能ナビゲーション (お問い合わせ、サイトマップ、サイト内検索機能、など)、サイトロゴ (ホームへのリンク)、といった重要な機能が並んでいて、そこに素早くアクセスできるようにしたほうが親切だから。」「ページの先頭に戻る際、スクロールバーまでマウスポインターを動かしてドラッグするのが、面倒だから。」...というのが、主な理由でしょう。 一見とても便利な機能なだけに外すのは難しい
UIが速すぎる場合
ユーザーは、変化が速すぎるものを見落とすことがある。また、気がついているときでも、画面上の変化する要素を、限られた時間内に理解するのはさらに難しい。 When the UI Is Too Fast by Jakob Nielsen on July 8, 2013 日本語版2013年7月22日公開 応答時間関連のユーザビリティ上の問題の99％がユーザーインタフェースが遅すぎることが原因であることを考えると、コンピュータが速すぎるという数少ない事例について書くというのは危険なことかもしれない。結局のところ、 コンピュータは遅すぎることが多い。そして、 応答時間が速いとユーザビリティは向上する。急速に人間の記憶は劣化するので、遅いコンピュータを待っている間、人は自分がしていたことの一部を忘れてしまう可能性があるからである。 その上、若いユーザーが忍耐力に欠けることはよく知られているが、年配のユー
10代のユーザビリティ： ティーン向けWebサイトのデザイン
ティーンは、自分のウェブを扱う能力に（過剰に）自信を持っているが、彼らのパフォーマンスは大人に劣る。読解レベルの低さや、忍耐力のなさ、発展途上の情報収集スキルにより、ティーンのタスク成功率は低くなる。そのため、サイトはシンプルで共感しやすいものにする必要がある。 Teenage Usability: Designing Teen-Targeted Websites by Jakob Nielsen on February 4, 2013 日本語版2013年2月18日公開 ティーンはインターネットにつながっている。テクノロジーがティーンエイジャーの生活に深く溶け込んでいるため、彼らに役立つ、ユーザブルなウェブサイトを作り出すことがこれまで以上に重要になってきている。次善のものがクリックするだけで手に入り、SMSメッセージによる割り込みが例外ではなく普通のことである世界で成功するには、ウェブサ
Stop Misusing Select Menus
There are many controls to choose from when designing a form. Choosing the wrong one can make your form hard for users to fill out. One control that’s often misused is the select menu. When to Use a Select MenuSometimes you’ll find a select menu with 2 options and sometimes with over 20 options. In both cases, the select menu is used wrong. When you have fewer than 5 options for users to select fr
Finger-Friendly Design: Ideal Mobile Touch Target Sizes
In darts, the bulls-eye is harder to hit than any other part of the dartboard. This is because the bullseye is the smallest target. The same principle also applies to touch targets on mobile devices. Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap. But exactly how b
モバイルのUXがユーザビリティガイドラインを厳格化する
ガイドラインの多くはモバイルデザイン向けもデスクトップデザイン向けも似たようなものである。しかし、モバイルの場合はその解釈の仕方がずっと厳密になる。 Mobile UX Sharpens Usability Guidelines by Jakob Nielsen on November 7, 2011 日本語版2011年11月22日公開 最近、書いたコラム、モバイルコンテンツ： 不確かならば省略しようでは、モバイルユーザーに向けて書くときには副次的な内容は削除しよう、ということをサイトオーナーに向けてアドバイスした。すると、多くのツイートやブログの投稿、コメントが、このテーマについて敷衍した。そう、モバイルコンテンツからは無駄な部分を確実に取り除いたほうがよい。しかし、デスクトップウェブサイト向けに書くときにも副次的なコンテンツはカットしよう。 私はある意味、これには同意するしかない。19
The Unstoppable Carousel
JavaScript carousels are a nice way to show off multiple products or highlights in the same area of the page. But there is one thing about the badly made ones that annoys me: they have no way to pause the thing. Here’s an example of a product carousel used on the Penguin website: Clicking on a section of the carousel will bring that section into focus, but the carousel is still in rotation mode so
スマートフォンサイトに適したユーザビリティとは？【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
ウェブサイト設計の時に役立つ7つのテクニック／【その2】関連性 (ユーザビリティ実践メモ)
実際にウェブサイトを作っていくときに役立つ7つのテクニック、第2回のテーマは「関連性」です。関連性の強い情報の見せ方について、実例や犯しやすいミスを交えて解説していきます。 ファーストビュー 関連性 ←今回のテーマ 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第2回は「関連性」についてです。ユーザに2つの要素の関連性を認識してもらうには、1つの「まとまり」に見えることが必要です。人がどのようにまとまりを感じるかについては、ゲシュタルト心理学などの分野で議論されてきました。その中で、ウェブサイトを作る上で重要なのは、以下の2点です。 近接 閉合 1.近接 近接とは、簡単に言えば近いということです。例として、以下の図を見てください。 図1 上の図を見たときに、下の図のように右上の2つ、左下の1つをまとまりとして感じたのではないでしょうか。このように、人
14 Guidelines For Web Site Tabs Usability - Usability Geek
Tabs have long been used to show alternative views of the same group of information tabs in software. Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire. With the emergence of web sites, tabs started being used for naviga
ウェブサイト設計の時に役立つ７つのテクニック／【その1】ファーストビュー設計のポイント (ユーザビリティ実践メモ)
サイトを作るにあたって、伝えたいことやユーザが求めているものをはっきり考えられても、いざ実際のウェブサイトにしようとするとどう作ったらいいのか途方に暮れてしまう、といったことはありませんか？ 実践メモでは、今回から7回シリーズで実際のウェブサイトをどう作っていったらよいのか分からないときに役立つ、特に重要な7つのテクニックについてまとめていきます。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第1回は「ファーストビュー」についてです。ファーストビューは、ユーザがそのページを見るかどうかを決める重要なエリアです。以下4つのことに気をつけてください。 ファーストビュー設計／4つのポイント 縦幅を節約する 適切なフィードバックを与える 下にページがつながる印象を与える 画像を置く 1. 縦幅を節約する スクロールしないユーザもい
5 Big Usability Mistakes Designers Make on Carousels
A carousel isn’t just a device you’ll find at the airport or amusement park. It’s also a widget that’s found on websites. Designers use them to display visual items in a way that’s quick for users to browse. Designers use them a lot, but making them usable is a different story. There are five big usability mistakes designers make when they design carousels. Are you making these mistakes on your ca
国際的なユーザビリティ： 大同小異
3大陸で行ったユーザーテストで、主要なユーザビリティガイドラインは世界中で有効だと確認された。しかし、国際的なユーザーをより適切に支援するには、他にも考慮すべき事柄がたくさん存在する。 International Usability: Big Stuff the Same, Details Differ by Jakob Nielsen on June 6, 2011 日本語版2011年6月16日公開 今年に入ってから、オーストラリアと中国、アラブ首長国連邦（UAE）でウェブサイトやイントラネット、モバイルサイトとアプリに関する様々なユーザビリティ調査を実施した。もちろん、我々は以前から数々の国際的テストを（合計13カ国で）行ってきてはいる。しかし、この最新の調査は、世界の3つの異なる地域にわたっていたため、国際的なユーザーエクスペリンスの全体像を一歩下がって、じっくり考えるよい機会となっ
日本向けのウェブデザインというのはあるのか? – 秋元
日本進出に興味のある海外企業や外国人から質問されることがあるので、まとめてみたいと思います。 僕はウェブデザイナーじゃないので、プロの方から補足や突っ込みがいただければとても嬉しいです。 [更新 2011-02-01] コメント・ツイッター・はてブからの意見を反映させました。 ある程度まとまったら英語にしてAsiajinにも書こうかと思います。 日本向けにウェブサイトを作るときに特別しないといけないことはあるのか? 「メニューの文字をGoogle Translateで全部日本語に置き換えたけど、これでいいかな? 他にすることある?」 – 機械翻訳は使い物にならない 英語-フランス語、とか英語-スペイン語、のノリで機械翻訳を使っても、あなたが想像するレベルの日本語には決してならない # 英語に再機械翻訳してのチェックは必須だが、それでも日本語訳のおかしさが見えてこないケースもある – フォン
ユーザに情報を届けるテクニック - 数と順序を明示する (ユーザビリティ実践メモ)
自分が作ったサイト内のページにおいて、ユーザがどのように情報を見ているかは、誰もが気になるところかと思います。今回は、ユーザに届けたい情報を、きちんと届けるためのテクニックを1つ、ご紹介します。 弊社では、ユーザ行動観察調査を行う際、ユーザがどこを見ているのかを分析できるアイトラッキングシステムを利用しています。 あるユーザ行動観察調査で、以下のような2カラム構成の画面をユーザに使ってもらったところ、ユーザに右側の情報を見てもらえない（情報に気付いてもらえない）まま、ユーザの視線がページ下部まで流れてしまうという現象が見られました。 一般的に、ユーザの視線は画像に集中する傾向があります。図1のプロトタイプの場合、左側に配置した訴求ポイントが最もユーザに届けたい情報であったため、エリアを大きく取り、大きな画像を用いて説明を行っていました。 しかし、そのために、右側に配置した訴求ポイントをユー
Webユーザインターフェースの "暗黙知" を意識していますか？ : LINE Corporation ディレクターブログ
暗黙知（あんもくち、Tacit Knowing）は、ハンガリーの哲学者・社会学者マイケル・ポランニー（Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、（全体的・部分的に）言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日本のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日本からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基本的なところだけ
探しやすい一覧のコツ (ユーザビリティ実践メモ)
コンテンツ量の多いサイトでは、情報を一覧にすることで、ユーザが欲しい情報を見つけやすくするという手法がよく使われます。今回は表形式で情報を整理する際の考え方を、ユーザ行動観察調査の事例を元にご紹介しましょう。 図1は、ある旅行情報サイトでの情報一覧ページです。次の休暇にお得なパッケージツアーを検討しているユーザは、どのようにこのページを使うと思いますか？ 弊社のユーザ行動観察調査の結果、ユーザの視線は下の図のように左右に大きく動き、かなり時間をかけて表を見ていく様子が観察されました。 このページを見る際のユーザの関心事は、第一に「予算の範囲内で一番お得なツアーは何か」であり、さらにいえば「同じ価格ならできるだけ魅力的なところに行きたい」ということでした。 したがって、ユーザは各パッケージツアーの「価格」と「割引率」に注目しています。この表では二つの情報が離れた場所にあるため、視線があちこち
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
nabokov7; rehash : 「次のページ」は右か左か (いわゆる「前次問題」?)
January 08, 200923:46 カテゴリイントラブログよりサービス作りの話 「次のページ」は右か左か (いわゆる「前次問題」?) 「前次問題」というのがたまにブックマークで話題に上ってくるのだけど，自分の中ではこれは「横書きか縦書きか」「昇順か降順か」のたった二つのファクターのみに依存する問題として整理できてるつもりなので，この機会にまとめてみる。 (以前，マリオは左から右へ進むので云々といった話にまで拡大してたこともあるみたいだけど，本当はもっとシンプルな話のはず。) I. 第一の要素: 横書きか縦書きか I-a. 横書きの場合 文章の流れは左上から右下。 複数ページが横に並ぶ場合は，ページは左から右へ進む。(左開き) I-b. 縦書きの場合 文章の流れは右上から左下。 ページが横に並ぶ場合は，ページは右から左へ進む。(右開き) ここで原則1。 webは基本的に横書きなので，
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
金は奪われても知識は奪われない