Webデザイナーのためのユーザビリティのヒント10選を翻訳してみた : カナダ在住、WEB制作者のブログ

Webデザイナーのためのユーザビリティのヒント10選を翻訳してみた

January 1, 2009

さて、皆様Happy New Year。こちらは本日が元旦になります。日本と違いそんなに重要な日でもないので、今日だけ休みであとは普通に仕事ですが。
先日、ちょっとユーザビリティについて考えていたら以下のような記事を発見しました。ユーザビリティについて、とても良くまとめられています。

10 Usability Tips for Web Designers

うーん、英語の勉強もかねて、ちょっと翻訳させていただこうかなと思います。

読み返しても結構間違っていると思うのですが、違っていたら指摘ください。

Simply put, usability is making your website easy for your visitors to find the information they need when they need it.

"簡単に言えば、ユーザビリティとはあなたのウェブサイトを訪問する人たちが必要なとき、必要な情報を簡単に得られるようウェブサイトを作ることです。"

A common misconception about usability amongst web companies is that usability is expensive.

"ウェブ会社の間にある共通の誤認はユーザビリティとは高価な物だということです。"

Yes, there are multi-national companies that spend thousands of dollars on usability tests and research, but for an everyday company usability is achievable without the knowledge of usability experts or without expensive equipment for testing.Web designers have an even easier job to do, just by reading usability articles they can accumulate a fairly good knowledge about usability basics and how to implement them on a website.

"そう、多国籍な企業においては、ユーザビリティテストと研究に何千ドルもの費用を費やしますが、一般企業のユーザビリティは、専門家の知識無し、または、テストのための高価な機器無しにユーザビリティを実現できるのです。"

"ユーザビリティに関する基本情報と、どのようにウェブサイトに実装するかについてに関する記事を読むことで、知識を蓄積しウェブデザイナー達の仕事はより簡単になる。"

1. Include a Tagline "タグライン（キャッチフレーズ）を実装"

A tagline is a statement or a motto that represents a company's, or in our case a website's, philosophy and mission.It should be the most obvious element on a website's front page and it should clearly describe the website in one phrase.It should be the most obvious element on a website's front page and it should clearly describe the website in one phrase.
Statistics show that a website has just 8 seconds to capture a visitor's attention for them to browse the site further.
Without a clear tagline a website would have a hard time keeping visitors long enough to browse the inner pages.

"タグラインは、企業のメッセージまたはウェブサイトの座右の銘、もしくは我々の場合はウェブサイトの哲学とミッションである。"

"それは、最も明白な要素としてウェブサイトの前面に掲載すべきであり、尚且つ明確にウェブサイトのことを一つのフレーズ内に記述する必要があります"

"統計情報によれば、ウェブサイトを訪れた訪問者の注目を得るのに8秒間は停止するそうです。"

"ウェブサイトに明確なタグラインが無ければ、訪問者がページ内を見て回るのに十分苦労する長さでしょう。"

参考サイト1

参考サイト2

2. Implement Site Search "サイト内検索を実装する"

As with taglines, site search is a very important element on a website.
When users are looking for something they typically look for a text field where they can enter their search term.
According to Jacob Nielsen's web usability tips, make this search box 27 characters wide in order for the text to be clearly visible and easy to use.
Place the search text field on the top of your web page, because users tend to search a website according to the F pattern, meaning from the top left to the bottom right.
Include a search button and clearly specify the search text, don't use text such as Go or Submit, because these expressions tend to mislead your website's visitors.

"タグライン同様に、サイト検索はウェブサイトには非常に重要な要素の一つです。"

"ユーザーは何かを探すとき、彼らは検索用語を入力することが出来るテキストフィールドを探します。"

"Jacob Nielsenのウェブユーザビリティのヒントによれば、はっきり認識でき、使いやすい検索ボックスを作るために27文字幅のテキストボックスを作ること。"

"検索フィールドの場所は貴方のウェブサイトのトップに、なぜならばユーザーはFパターンになぞってウェブサイトを検索する傾向にある、その意味は左上から右下にという意味だ"

"検索ボタンと明確な検索するテキストを含めるなら、例えばGoまたはSubmitのテキストは使わない方がよい、なぜならばそれらは訪問者を間違いに導く表現の傾向にあるからだ。"

参考サイト1

3. Don't Use Extensive Graphics "グラフィックを多用しない"

Abusive use of design elements and graphics are always bad for a website, they just mislead the site's visitors.
Only design to improve the web page not just to decorate it. From a usability point of view, less is always more.

"グラフィックとデザイン要素を汚く設計しすると訪問者を誤解させるだけであり、大抵はウェブサイトにとって良くありません、"

"ウェブサイトのデザインを良くするためには単に装飾すればいいわけではありません、見ることの使い勝手に視点を置いて、少なくするべきでしょう。"

4. Use Site maps "サイトマップを使う"

Site maps are a relatively new website feature that improves web page navigation and also search engine optimization (SEO).
Site maps in essence are a structural representation of a website's pages and architecture. It can be a document in any form, or a web page that lists the pages on a web site, typically organized in hierarchical fashion.

"サイトマップは、ウェブページのナビゲーションとSEOを行う、比較的に新しいウェブサイトの特徴です。"

"サイトマップの本質は、ウェブサイトのページとアーキテクチャを構造的に表現します。それはあらゆる形式の文章にすることができ、また通常はウェブサイト上に階層的に整理してウェブページ上にページのリストを設置します。"

参考サイト1

Recently, search engines like Google, Yahoo and MSN have started offering a Sitemap protocol which is similar to a website's site map page, but the data is organized in XML format. There are Sitemap XML generators that create these documents for a specific URL.

"近年では、Google、Yahoo、MSNのような検索エンジンはサイトマッププロトコルを提供し始めているがどれもウェブサイトのサイトマップに似ているが、データはXML形式で編成されている。それらは、XMLジェネレーターから特定のURLをドキュメント化し作成されています。"

参考サイト2

5. Don't Break the Workflow "ワークフローに侵入してはいけない"

By workflow we mean every operation that a user is doing on a website. For example filling out a form, registering on a website, browsing categories, archives, etc. Don't break these workflows, let the user cancel any operation. By not letting the user cancel an operation, we're forcing them to finish it even if they don't want to.

"ワークフローはウェブサイト上で行われるユーザー全ての操作を意味します。例えばフォームに必須情報を記入、ウェブサイトに登録する、カテゴリーを閲覧する、アーカイブ、その他。ユーザーはそれらの操作をキャンセルすることが出来るので、ワークフローに侵入してはいけないのです。ユーザーが操作をキャンセルできなければ、我々は彼らが望んでいなくても彼らの操作を完了させなくてはいけない。"

Not every operation on a website is obvious for users, guide them through the specific workflow by using descriptive tips. (e.g. when filling out a form). Javascript links usually break the workflow, so it's not recommended to use them on your website.

"ウェブサイト上の全てを操作できなければ、特定のワークフローを通じ、ヒントを使用しながらユーザーにとって明白になるようガイドしなければならない。（例：フォームに入力する時）Javascriptは時にワークフローに侵入する、だから貴方のウェブサイト上でそれを使用することはお勧めしない。"

Another mistake is not changing the color of visited links, this results in breaking the navigational design. Let users know where they have been and where they are on a website.

"もう一つのミスは、visitedのリンク色を変更しないことである、これはナビゲーションのデザインを結果として壊している。ユーザーはどこで何をしてウェブサイトのどこにいるかは知っているものです。"

6. Create Easily Scannable Web Pages "ウェブページを簡単にスキャンする"

Easy to read web pages plays an important role in maintaining visitor's loyalty, keeping them on your site and reading your content. Usability tests show that the majority of users don't read web pages, they scan them, looking for titles, bold, emphasized text or lists.

"簡単にウェブページを読み取れるということは、訪問者の貴方のウェブサイトに滞在し、コンテンツを読むという忠誠心を維持する上で重要な役割を果たしています。"

Eye tracking studies conducted by Jakob Nielsen show that users read content that resembles an F shape, meaning that the reading starts from the upper left of the web page, next it moves down a little starting from the left again.

"Jakob Nielsenの運営するEye Tracking Studiesでは、ユーザーの読んだコンテンツが"F"のような形をして見える、その意味は、ユーザーはウェブページの左上から読みだし、次に少し下に読み進め、また左側を読み返すということである。"

参考画像1

Nielsen also states the implications of this reading pattern:

"Nielsenも同様にこのパターンの意味を以下のような関係性があると言っている"

Users won't read a web page content word by word, they will extract important paragraphs, bold text, etc.
The first two paragraphs are essential on a web page. These must contain the most important information that your visitors are looking for.

"ユーザーはウェブページのコンテンツを単語単位で読むことはありません、彼らの重要なパラグラフを抜粋すると、太文字かその他であることが分かります。"

"初めの2段落はウェブページ上で必要不可欠です。ここでは、ユーザーが探している最も重要な情報を含む必要があります。"