New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

User Experience Fundamentals for Web Design
Illustration by

Formatting pages for information exchange


From:

User Experience Fundamentals for Web Design

with Chris Nodder

Video: Formatting pages for information exchange

Heading and the subheadings are the highest level of the formatting within your page. They aren't just a way of splitting up chunks of text. As we saw earlier they are also the main things that people scan when they look over a page, so make sure that they are summaries of the content they contain. If you are having trouble thinking about what words to use in the headings and subheadings, just think about the words the people would such on to find this content and then use those words. Obviously, the content within each heading has to match with the words you choose. Try to never use more than three levels of headings on your pages.
Expand all | Collapse all
  1. 1m 7s
    1. Welcome
      1m 7s
  2. 4m 37s
    1. Building a site for your visitors
      1m 29s
    2. Understanding how people browse the web
      45s
    3. It's all about information
      48s
    4. What causes people to leave sites?
      1m 35s
  3. 3m 50s
    1. Simple design
      1m 9s
    2. Consistent design
      1m 11s
    3. Standard design
      1m 30s
  4. 20m 55s
    1. Elements of navigation
      1m 21s
    2. Content has a structure
      2m 18s
    3. Understanding menus
      3m 19s
    4. Reviewing some menu myths
      2m 4s
    5. Working with site maps
      1m 5s
    6. Adding search to your site
      2m 53s
    7. Understanding links
      3m 43s
    8. Exploring clickable elements
      1m 18s
    9. Understanding Fitts's Law
      2m 54s
  5. 11m 19s
    1. People can begin from any page on your site
      1m 24s
    2. Elements every web page should have
      3m 25s
    3. Creating progressive navigation
      3m 22s
    4. Arranging your content
      3m 8s
  6. 8m 7s
    1. How people read on the web
      2m 31s
    2. Writing for information exchange
      1m 43s
    3. Formatting pages for information exchange
      3m 53s
  7. 7m 21s
    1. Using your homepage as a site summary
      1m 50s
    2. Creating fresh content
      1m 20s
    3. Displaying navigation and search
      1m 25s
    4. The five-second test
      2m 46s
  8. 8m 8s
    1. Showing people what you've got
      3m 50s
    2. Making comparisons easy
      1m 24s
    3. Creating landing pages from ad campaigns
      2m 54s
  9. 11m 22s
    1. The real purpose of detail and product pages
      1m 16s
    2. Writing descriptive text
      2m 4s
    3. Using images to set context
      2m 17s
    4. Showing the price for products
      2m 27s
    5. Have a call to action
      1m 36s
    6. About Us: a special detail page
      1m 42s
  10. 10m 58s
    1. Ask for information in context
      2m 25s
    2. Making forms as painless as possible
      2m 34s
    3. Creating form fields
      3m 37s
    4. Handling errors gracefully
      2m 22s
  11. 9m 9s
    1. Using different types of media
      1m 55s
    2. Simple question: Does it enhance the experience?
      2m 15s
    3. Using graphics for explanation, not decoration
      1m 17s
    4. What is interactive content?
      1m 58s
    5. Laying out your page for media
      1m 44s
  12. 5m 3s
    1. Making money without selling out
      1m 37s
    2. Adding graphical ads
      2m 10s
    3. Creating text ads
      1m 16s
  13. 3m 42s
    1. Simple, consistent, and standard design
      2m 4s
    2. Consider your users and you'll be fine
      1m 38s
  14. 1m 31s
    1. More resources
      1m 31s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
User Experience Fundamentals for Web Design
1h 47m Beginner Dec 20, 2012

Viewers: in countries Watching now:

Discover how to create a user experience that embodies utility, ease of use, and efficiency by identifying what people want from websites, how they search for information, and how to structure your content to take advantage of this. In this course, author Chris Nodder shows how to merge engineering, marketing, graphical and industrial design, and interface design to create a website that meets the needs of your customer, and is simple, elegant, and engaging. The course shows how to use graphics to help rather than hinder visitors, balance advertising and content, and integrate video, audio, and other media. Other tutorials consider the landing page experience and elements like contact forms from the visitor's perspective.

Topics include:
  • Applying simple, consistent, and standard design principles
  • Tailoring your menus, site map, and links for visitors
  • Understanding progressive navigation
  • Formatting page for information exchange
  • Understanding the importance of the homepage
  • Creating compelling category and landing pages
  • Showing the price for products
  • Having a call to action
  • Asking for information on forms
  • Using media to tell your story
  • Earning ad revenue without discrediting your site
Subjects:
Web User Experience
Author:
Chris Nodder

Formatting pages for information exchange

Heading and the subheadings are the highest level of the formatting within your page. They aren't just a way of splitting up chunks of text. As we saw earlier they are also the main things that people scan when they look over a page, so make sure that they are summaries of the content they contain. If you are having trouble thinking about what words to use in the headings and subheadings, just think about the words the people would such on to find this content and then use those words. Obviously, the content within each heading has to match with the words you choose. Try to never use more than three levels of headings on your pages.

If you find yourself using more, it's probably time to split that content out onto different pages and link back to it, using the topic page format like we described in the section on arranging your content, that's in Chapter 4. Another thing you can do to help visitors out is give them a summary of every page, so they can quickly work out whether they are in the right place. You often see this in News articles where the first paragraph is basically a condensed version of the whole story. It works in news articles, it works on blogs, and it also works on the information sites and ecommerce stores. These summaries are also used for the description text in search engine results.

And as the text you put on category pages within your site, to let people know what they can find within that category. So you write the summary once, but you use it in many places. When it comes to body text, you can borrow another technique from news sites. They use the inverted pyramid style of writing. This tells the whole story in the first paragraph, then expands on elements of the story bit by bit through the article. It was originally useful in print newspapers when the journalists didn't know how many column inches they would have for a story. They had to write so it didn't matter if the editor cutoff the last paragraphs.

From a reader's perspective, it means that people can stop at any point and still have the main story. Or carry on reading to get more and more detail. Using the inverted pyramid style online means starting with your conclusion. It's okay, even if you give the whole story away in the first sentence, people will probably carry on reading. They are after information, so they will keep working through the text, until they get to the level of detail they want. Giving them the conclusion at the beginning means they'll know whether they're in the right place within your site or not. After the conclusion, start explaining the most important facts at a high level.

This introduces the key points early, write in small chunks and give each new idea its own paragraph. After you have dealt with the facts, you can start giving more background detail. Now, remember in the previous section we told about by writing 50% less text than you would for printed material. If you've done your job well with the inverted pyramid, you can simply cut out the bottom half of your text and still give readers everything they need. Another way of reducing the amount of text is to use bulleted or numbered lists. Only use numbered lists, if you're detailing the steps that somebody should take to do something or listing the order or ranking of a set of items, otherwise, use plain bullets.

Eye Tracking stuies show that readers loves lists, their eyes are drawn to them. Make sure you put the keywords at the beginning of each list entry, and try to keep each entry relatively short. I mentioned links back in the Navigation section. But I want to reinforce something again here. Links standout on the page, because they're a different color and should be underlined. That means that they are a way of highlighting keywords, so they show up more. It really make sense to write information rich sentences and then just highlight the keywords to form your link text, rather than writing the text and adding a Click Here link at the end.

That Click Here text tells visitors nothing when they are scanning the page, whereas the keywords are most likely just what people are looking for. So, by using clear headings, an informative summary, and concise body text, you will help get your message across. Lists are a great way of making several points in quick succession with minimal space, and giving people informative link text, means they'll know quickly where to go next on your site, which keeps them engaged.

Find answers to the most frequently asked questions about User Experience Fundamentals for Web Design.


Expand all | Collapse all
please wait ...
Q: How were the graphics for this course put together?
A: The graphics are drawn in house at lynda.com by a graphic designer and then animated with Adobe After Effects. It is possible to get a similar effect using PowerPoint.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed User Experience Fundamentals for Web Design.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.