7 Best Practices for Improving Your Website’s Usability
The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off.
Writing content for web users has its challenges. Chief among them is the ease with which your content is read and understood by your visitors (i.e. its readability).
When your content is highly readable, your audience is able to quickly digest the information you share with them — a worthy goal to have for your website, whether you run a blog, an e-store or your company’s domain.
Webサイトのデザインの利便性を図っていくには、他人とすぐにサイトを共有していく簡単な方法としてjoin.meがある。これにより、オンザフライで協力し合い、素早く状況をまとめ、Webサイトを際立たせることができる。
ネットユーザに向けてコンテンツを構築していくことはとても困難なものであり、サイトを訪れた人がそのコンテンツを読んで簡単に理解してもらうことが大切である。(読みやすいということ)
コンテンツが読みやすければ、サイトを訪れた人が共有している情報をすぐに理解できる。これはブログ、Eーストア、それに会社のドメインであろうとサイトが目指すべき最終的な目標と言える。
Web Design Usability Series は join.me によってサポートされている。join.me は画面を他の人と簡単に共有するもので、あっという間に顔を突き合わせてコラボレーションしたり、成果を見せあったりできる。
Web ユーザー向けのコンテンツを書くことには独特の難しさがある。最も重要なのは、読み手にとって、コンテンツが読みやすく理解しやすいようにすること、すなわちリーダビリティである。
コンテンツのリーダビリティが高ければ、読者は書き手の伝える情報をすばやく要約することができる。個人のウェブサイトやあるいはブログにとっても、ネットショップにとっても、企業サイトにとってもこれは価値ある目標といえる。
ウェブデザインの使いやすさシリーズは、"join.me"によって運営されており、あなたの画面を誰かとすぐに共有するための簡単な方法です。
ウェブユーザーのために目次を書くのは、難しいことです。一番重要なのは、あなたの目次が、訪問してくれた人々にどれくらい簡単に読まれ、理解してもらえるかです。(つまり、読み易さのことです)
あなたの目次が非常に読みやすければ、訪問してくれた人は、あなたと共有することになる情報の概要を素早く知ることができます。あなたがブログ、Eストア、会社のドメインを運営するかどうかに関わらず、あなたのウェブサイトにとってそれは価値ある目的となります。
Below are a handful of dead-simple tips and techniques for enhancing the usability and readability of your website’s content.
These tips are based on research findings and suggestions by well-regarded usability experts such as Jakob Nielsen.
This list is not exhaustive, and is meant merely to arm you with a few ideas that you can implement right away. If you have additional tips to add, please share them in the comments.
General Goals of User-Friendly Web Content
Usable, readable web content is a marriage of efforts between web designers and web content writers.
Web pages must be designed to facilitate the ease of reading content through the effective use of colors, typography, spacing, etc.
これらのヒントは調査の結果とJakob Nielsenのような高い評価を受けているユーザビリティ専門家による提案に基づいている。
このリストは徹底的で、すぐに実施できるいくつかのアイデアを提供する。もし加えるられる追加のヒントがあるなら、コメント欄で共有してください。
ユーザーフレンドリーウェブコンテンツの一般的な目標
便利で、可読性のあるウェブコンテンツは、ウエブデザイナーとウエブコンテンツライター間の努力の成果である。
ウェブページは、色、タイピング、スペースなどを効果的に使用する事を通してコンテンツの可読の容易さを促進する為にデザインされなければならない。
これらのティップスは、ユーザビリティの専門家として名高い、ヤコブ・ニールセンによる調査と提言をベースにしている。
このリストは完全なものではなく、単に書き手に実践可能なアイデアを与えようとするものである。もし他にも良いティップスがあれば、コメント欄に書き加えてほしい。
ユーザーフレンドリーなウェブコンテンツのための一般的目標
使いやすく読みやすいウェブコンテンツは、ウェブデザイナーとコンテンツライターの努力が互いに結ばれることによって作られる。
ウェブページは、コンテンツを容易かつスムーズに読み進められるよう、配色やレイアウト、スペースの配置などが適切にデザインされていなければならない。
これらのヒントはJakob Nielsenのような定評あるユーザビリティの専門家による研究結果や提案に基づいている。
このリストは完全ではなく、すぐに実行出来るいくつかのアイデアを身につけるためのものにすぎない。これ以外にもヒントがあれば、コメント欄でシェアしてほしい。
使いやすいウェブ・コンテンツの一般目標
使いやすく、読みやすいウェブ・コンテンツはウェブ・デザイナーとウェブ・コンテンツ・ライターの努力が融合したものである。
色、タイポグラフィ、スペースなどを効果的に利用して、コンテンツが読みやすくなるようにウェブ・ページをデザインしなければならない。
In turn, the content writer must be aware of writing strategies that enable readers to quickly identify, read and internalize information.
As we go through the seven tips below, keep these three general guidelines in mind:
Text and typography have to be easy and pleasant to read (i.e. they must legible).
Content should be easy to understand.
Content should be skimmable because web users don’t read a lot. Studies show that in a best-case scenario, we only read 28% of the text on a web page.
What simple things can we do to achieve these goals? Read on to see.
下記の7つのヒントを検討するし、これらの3つのガイドラインを心に留めておくとよい。
テキストと活版術は、読むに易しく感じ良くあるべきである(読みやすくあるべきだ)。
コンテンツは理解し易くする。
ウェブユーザーは多くは読まないので、コンテンツは拾い読みしやすくする。調査は、最高のケースシナリオにおいて、私達はウェブページのテキストの28%しか読んでいないと示した。
これらの目標を達成する為に、私達ができる簡単な事は何か?知るために読んでください。
以下の7つのヒントを話していく上で、これらの3つの一般的なガイドラインを頭に入れておいてほしい。
・テキストやタイポグラフィーは読みやすく見た目が良いものでなくてはならない。(すなわち、判読可能であること)
・コンテンツは理解しやすいものであること
・ウェブのユーザーは深く読まないので、コンテンツは流し読みできるものであること。研究によると、うまくいったとしても、我々はウェブページのテキストの28%しか読まないのである。
これらのゴールを達成するために我々ができる簡単なことは何か?更に読み続けてみよう。
下記の7つのヒントを検討する間に、これらの3つの一般的な指針を頭に入れておいてほしい。
文章とタイポグラフィは簡単に読めて心地いい(つまり読みやすい)ものでなけれなければならない。
コンテンツは理解しやすいものでなければならない。
コンテンツは流し読み出来なければならない。ユーザーはコンテンツをあまり読まないからであり、研究によると、最もうまくいった場合でもウェブページ上の文章の28%しか読んでいないという。
これらの目標を達成するために出来る簡単なことは何か?それを理解するにはさらに読んでほしい。
1. Keep Content as Concise as Possible
It’s pretty well known that web users have very short attention spans and that we don’t read articles thoroughly and in their entirety. A study investigating the changes in our reading habits behaviors in the digital age concluded that we tend to skim webpages to find the information we want.
We search for keywords, read in a non-linear fashion (i.e. we skip around a webpage instead of reading it from top to bottom) and have lowered attention spans.
This idea that we’re frugal when it comes to reading stuff on the web is reinforced by a usability study conducted by Jakob Nielsen. The study claims a that a 58% increase in usability can be achieved simply by cutting roughly half the words on the webpages being studied.
Shorter articles enhance readability, so much so that many popular readability measurement formulas use the length of sentences and words as factors that influence ease of reading and comprehension.
What you can do:
・Get to the point as quickly as possible.
・Cut out unnecessary information.
・Use easy-to-understand, shorter, common words and phrases.
・Avoid long paragraphs and sentences.
・Use time-saving and attention-grabbing writing techniques, such using numbers instead of spelling them out. Use “1,000″ as opposed to “one thousand,” which facilitates scanning and skimming.
・Test your writing style using readability formulas that gauge how easy it is to get through your prose. The Readability Test Tool allows you to plug in a URL, then gives you scores based on popular readability formulas such as the Flesch Kincaid Reading Ease.
・要点をできるだけ早く伝える。
・無駄な情報は省く。
・分かりやすく、短く、日常的な言葉やフレーズを使う。
・長い段落や長文はさける。
・時短で目を引く文書作成手法を使う。例えば、字でなく数字を使う。
スキャニングやスキミングがしやすい様に千のところを1000にする。
・あなたの文章を可読性公式に通して文体を評価してもらう。
ネット上でReadability Test Tool を使い、よく利用されてる可読性公式の
Flesch Kincaid Reading Easeに通した結果を得点で知る事が可能だ。
・できるだけ早く要点を述べる
・不必要な情報は削除する
・短くて分かりやすい一般的な言葉や文を使う
・長い文、段落を避ける
・時間の節約ができ、人の注意を引く文章を書く。
例えば、数字の「1,000」を文字を使って「one thousand」などと書かず、
そのまま数字を使う。数字が文字で書かれれば、拾い読みや飛ばし読みを
促進することになる。
・リーダビリティー(読みやすさ)を計る算式を使って、あなたの書く文章が
読みやすいかどうかを調べてみる。Readability Test ToolではURLを入力すれ
ば、Flesch Kincaid Reading Easeなど有名なリーダビリティー算出法に基づい
て、そのサイトのリーダビリティーを採点してくれる。
・可能な限り早く核心に触れる。
・不要な情報は省く。
・理解しやすく、短く、一般的な単語や言い回しを用いる。
・長い段落や文は避ける。
・時間を節約し注意を引く書き方を用いる。例えば数字は "one thousand" のようにスペルを綴るのではなく "1,000" と書く。ざっと目を通したり流し読むにはこの方が都合がよい。
・文章がどれぐらい読みやすいかを計測できるユーザビリティ指標を用いて、書き方のスタイルをチェックする。Readability Test Tool は、URL を指定することで、Flesch Kincaid Reading Ease などの主要なリーダビリティ指標に基づくスコアを出してくれる。
2. Use Headings to Break Up Long Articles
A usability study described in an article by web content management expert Gerry McGovern led him to the conclusion that Internet readers inspect webpages in blocks and sections, or what he calls “block reading.”
That is, when we look at a webpage, we tend to see it not as a whole, but rather as compartmentalized chunks of information. We tend to read in blocks, going directly to items that seem to match what we’re actively looking for.
ここに興味深い記事がある。
ウェブコンテンンツの専門家であるGerry McGovern によると
ウェブ上で記事を閲覧する人は、一つのブロックから目当てのページを探し当て、
そして閲覧をするそうだ。名付けてブロック読みだそうだ。
つまり、我々がウェブ上で記事を閲覧する際、どうやら全体を一つとして
見ているのではなく、むしろ細かく区分けされた情報の集まりとして見ている様だ。
検索内容と一致すれば、直接その事項に目をやり、ブロック読みを始めてしまう様だ。
ウェブコンテンツ管理の専門家ジェリー・マクガヴァン氏が記事に書いたあるユーザビリティーの研究によって、同氏はインターネットユーザーがウェブページをブロックやセクションごとに読む、もしくはマクガヴァン氏が言う「ブロック・リーディング」をしているという結論に達した。
つまり、私達はウェブページを見る時、ウェブページを1つのまとまりとしてみているのではなく、むしろ区分化された情報のいくつかの塊として見ている傾向があるのだ。私達は区分ごとに読む傾向があり、積極的に探しているものに合いそうな項目に真っ先に目を向ける。
An eye-tracking study conducted by Nielsen revealed an eye-movement pattern that could further support this idea that web users do indeed read in chunks: We swipe our eyes from left to right, then continue on down the page in an F-shaped pattern, skipping a lot of text in between.
We can do several things to accommodate these reading patterns. One strategy is to break up long articles into sections so that users can easily skim down the page. This applies to block reading (because blocks of text are denoted by headings) as well as the F-shaped pattern, because we’re attracted to the headings as we move down the page.
続いてページの下の方に移動するという。間の文章がたくさん抜けたちょうどFの字の様な形だという。
この読書パターンを利用すればいくつかのことができる。
一つは、読者が簡単に流し読みができる様、長文の記事を項目に分けることだ。
これは、見出し効果で次々読みたくなるので、ブロック読み(見出しによって分割された文章ブロックのため)やF字型の構成に効果がある。
これらの読み方パターンに対し幾つかの対処ができる。1つは、長い記事をセクションに分ければ、ユーザーは用意にページの下まで拾い読みすることができる。これはFの字読みやブロック・リーディング(文のブロックは見出しによって示される)にもあてはまる。というのも、私達はページの下に進むにつれ、見出しに気を引かれるからだ。
Below, you’ll see the same set of text formatted without headings (version 1) and with headings (version 2). See which one helps readers quickly skip to the sections that interest them the most.
What you can do:
Before writing a post, consider organizing your thoughts in logical chunks by first outlining what you’ll write.
Use simple and concise headings.
Use keyword-rich headings to aid skimming, as well as those that use their browser’s search feature (Ctrl + F on Windows, Command + F on Mac).
できること:
掲載する文を書く前に、まず始めに書く内容の要点をはっきりさせ、考えを論理的にまとめて整理することに配慮する。
シンプルで分かりやすい見出しをつける。
ブラウザーの検索機能(ウィンドウズではCtrl+F、マックではコマンド+F)を使う人や拾い読みを助けるためにも、キーワードに富んだ見出しをつける。
実践しよう。
記事を書く時は、書き始める前にまず、自分の考えや思考の塊を整理して構成することを試みる。
見出しはシンプルで簡潔にする。
見出しはキーワードに富んだものにする。流し読みしやすく、ブラウザの検索機能 (Windows では Ctrl + F、Mac では Command + F) も使いやすくなる。
あなたは何ができますか?
ポストを書く前に、最初にあなたが書くものを概説することに基づいて、あなたの考えを論理的に組織することを考えてください。
簡単で簡潔な見出しを使ってください。
ブラウザーの検索機能(Ctrl + F on Windows, Command + F on Mac)により、キーワード(豊富な見出し)を使ってください、それはスキミングすることを助けられます。
3. Help Readers Scan Your Webpages Quickly
As indicated in the usability study by Nielsen referenced earlier, as well as the other supporting evidence that web users tend to skim content, designing and structuring your webpages with skimming in mind can improve usability (as much as 47% according to the research mentioned above).
What you can do:
Make the first two words count, because users tend to read the first few words of headings, titles and links when they’re scanning a webpage.
Front-load keywords in webpage titles, headings and links by using the passive voice as an effective writing device.
Use the inverted pyramid writing style to place important information at the top of your articles.
Nielsenを参照したユーザビリティ調査において示されたと同じく、ウェブユーザーが拾い読みできるようなコンテンツ、デザイン、ページ構成に心をとめると、ユーザビリティが向上する(上記で示されあ調査によると、47%もの向上)。
あなたができる事:
最初の2語に重きを置く。なぜなら、ユーザーがウェブページをスキャンしている時、ヘディング、タイトル、リンクの最初の数語を読む傾向があるから。
効果的なライティングデバイスをとして受動態を使う事によって、ウェブページのタイトル、ヘディング、リンクにおいてキーワードの前倒し。
重要な情報を記事のトップに置いた逆三角形のライティングスタイルを使う。
これまでに触れたニールセンのユーザビリティ調査や、その他の結果からもわかるように、ウェブではユーザーはコンテンツを流し読みする傾向にあり、ウェブページを流し読み向けにデザインし構成することでユーザビリティを (前出の調査では 47% ほども) 向上できる。
実践しよう。
最初の 2語を重視する。ユーザーは流し読みをする際、見出しやタイトル、リンクの最初の数個の単語しか読まない傾向にある。
ページタイトルや見出しやリンクでは、キーワードを前のほうに置くようにする。文法的には受動態を用いることが効果的となる。
逆ピラミッドの記述スタイルを用いて、重要な情報を記事の最初に持ってくる。
前述したニールセン氏のユーザビリティーの研究やウェブユーザーが内容をざっと読む傾向があることを表すその他の証拠が示すように、読者が拾い読みをすることを念頭においてウェブページをデザインし構成すれば、(前述した調査によれば47%も)
ユーザビリティーは向上する。
できること:
ユーザーはウェブページをざっと読んでいる時は、見出し、タイトル、リンクなどの始めの数単語を見る傾向にあるので、始めの2単語に重点をおく。
効果的なライティング手法として受身形を使い、キーワードをウェブページのタイトル、見出しやリンクの始めに出す。
逆ピラミッド型のライティング手法を用い、記事の一番始めに重要な情報を書く。
先述のNielsenによるユーザビリティ研究で指摘したが、ウェブ・ユーザーがコンテンツを流し読みする他の裏付けとなる根拠と同様に、流し読みを考慮してウェブページを設計、構築することでユーザビリティを向上させることが出来る(上記で言及された研究によると47%も向上する)。
出来ること:
最初の2つの言葉を大事にする。なぜなら、ユーザーはウェブページを拾い読みする時、見出しやタイトル、リンクの最初の数語を読む傾向があるからだ。
効果的なライティング手段として受動態を用い、ウェブページのタイトルや見出し、リンクでキーワードを早めに使う。
逆ピラミッド型のライティングスタイルを用いて記事の冒頭に重要な情報を載せる。