IntroductionWelcome| 00:00 | (music playing)
| | 00:04 | Hi! I'm Chris Nodder. Welcome to
User Experience Fundamentals for web Design.
| | 00:10 | User Experience means making every visitor
feel like your website was built just for them.
| | 00:14 | During this course, we'll focus on each
area of the page in turn. Starting with
| | 00:18 | navigation, then on to text and last of
all, we'll look at graphics, media and
| | 00:23 | adverts, to help you understand
the best way of using each component.
| | 00:27 | Next, we'll put all the elements of
the page together and describe best
| | 00:31 | practices for laying out information on
different types of pages like homepages,
| | 00:35 | forms, and product pages.
| | 00:37 | What you'll learn in this course will
be useful to you whether you're designing
| | 00:41 | anything from a personal blog site or
portfolio through to an ecommerce website
| | 00:46 | or a company's intranet.
| | 00:47 | The guidelines in this course are based
on psychological principles and lots of
| | 00:52 | research into how people work with websites.
| | 00:54 | That's my background.
| | 00:56 | I've been doing user research for large
companies and startups for the last 18
| | 00:59 | years, helping them create websites
and products that people love to use.
| | 01:04 | So let's get started.
| | Collapse this transcript |
|
|
1. What Makes a Good Web User Experience?Building a site for your visitors| 00:00 | You need to know who your audience is and how
they behave before you can build a successful site.
| | 00:05 | Different audiences have different needs.
| | 00:07 | For example, two people looking at
car reviews might want very different
| | 00:10 | information from the review.
| | 00:11 | Someone looking for a sports car will
want different information highlighted,
| | 00:14 | things like horsepower, torque, or speed,
than a small business owner such as
| | 00:18 | a florist who cares much more about fuel
economy, service intervals, and storage capacity.
| | 00:23 | Trying to give the wrong stats to
the wrong audience just doesn't work.
| | 00:26 | You need to tailor the content on your site
to the group of users that you care most about.
| | 00:31 | Luckily, overall most visitors to your
site will have many of the same behaviors.
| | 00:34 | Once you have worked out what those
behaviors are, you're on track to design a
| | 00:38 | user experience that's
just right for those people.
| | 00:40 | So the first step in your process has
nothing with the tools you use or the
| | 00:44 | platform you'll develop on, instead,
you need to spend some time thinking about
| | 00:47 | who exactly you're going to
optimize the site's design for.
| | 00:51 | It's worth the time to sketch out the
attributes of the visitors you care
| | 00:55 | about: what they value, what their
goals are, and what concerns might stop
| | 00:58 | them from using your site.
| | 00:59 | Some people call this type of sketch a persona.
| | 01:01 | Let's consider Flora, the florist.
| | 01:03 | The content you produce needs
to talk to her goals and values.
| | 01:06 | These goals and values might be very
different for somebody using a car for
| | 01:09 | recreational purposes.
| | 01:10 | As you go through the rest of the
design process keep referring back to
| | 01:13 | your persona sketch.
| | 01:14 | Ask yourself, will my persona feel like
the site is being built just for them?
| | 01:18 | The wonderful thing is by focusing on
this one individual you'll actually end up
| | 01:21 | building a site that lots
of people will enjoy using.
| | 01:23 | It gives your site a focus that you
just wouldn't have if you thought you were
| | 01:27 | building it for just everyone on the web.
| | Collapse this transcript |
| Understanding how people browse the web| 00:00 | In order to design a site that
people enjoy using, you need to know
| | 00:04 | what motivates them.
| | 00:05 | When people use the web, they're almost
always doing so to find information,
| | 00:08 | not for pure entertainment.
| | 00:10 | That means that when most people come
to your site, they're doing so with a
| | 00:13 | particular goal in mind.
| | 00:14 | They probably also got to you from a
search engine or by following a link rather
| | 00:18 | than by knowing your direct URL.
| | 00:21 | If you don't believe me,
check out the stats for your site.
| | 00:24 | Typically, many more visitors you referred
by search engines or links than come directly.
| | 00:28 | You can use these stats to find out what
people's goals were and that helps you
| | 00:32 | clarify what is that
visitors want from your site.
| | 00:35 | Because people are coming to your
site with a specific goal in mind, it's
| | 00:38 | important that you help
them quickly reach that goal.
| | 00:40 | We'll talk about giving visitors a good
idea of how to reach their goal quickly
| | 00:44 | in the next section.
| | Collapse this transcript |
| It's all about information| 00:00 | We've already mentioned that people
come to your site from search engines and
| | 00:03 | links more than from typing in a URL.
| | 00:05 | That means they are typically not
coming to your homepage, but to a page
| | 00:09 | somewhere else on the site.
| | 00:10 | It's important that this first page
they see lets them know whether they are on
| | 00:14 | track to get the information they need.
| | 00:16 | Each page has to say what the site is
about and give visitors an understanding
| | 00:19 | of how the information is laid out.
| | 00:21 | You can accomplish this by having a
clear site tag line and by making sure
| | 00:25 | you're your navigation is descriptive,
either of the items that people can find
| | 00:28 | on the site or of the
tasks that they can perform.
| | 00:31 | Each page should also clearly show
what it's about, using a descriptive page
| | 00:34 | heading and if it's relevant
informative pictures and summary text.
| | 00:37 | So by making sure that your site helps
people quickly orient themselves and work
| | 00:40 | out whether you have the information
they want, you make their lives easier.
| | 00:44 | That makes them happier and
therefore more willing to use your site in
| | 00:47 | the future.
| | Collapse this transcript |
| What causes people to leave sites?| 00:00 | Just like there are things that help
people decide to stay on your site, there
| | 00:04 | are also things that make them quickly leave.
| | 00:06 | It's not hard to work out what these
things are; you're probably been frustrated
| | 00:09 | with them yourself in the past.
| | 00:11 | The biggest issues are the things that
stop visitors from finding the information
| | 00:14 | they are looking for.
| | 00:15 | It's amazing how many sites hide the
information that visitors want to find.
| | 00:18 | The hiding happens in several ways.
| | 00:20 | One is using nonsensical or
technical product names in navigation.
| | 00:24 | Who knows the difference between
an XY200 and an XY300, for example?
| | 00:27 | Another is using puns or teases in
your link text, so the visitors don't know
| | 00:32 | what they will get if they click through.
| | 00:34 | Another way to hide information is by using
technical jargon instead of plain language.
| | 00:39 | Remember, even if you're running a site
for specialists in a particular field,
| | 00:42 | those specialists all start
off as newbies at some point.
| | 00:45 | If you present visitors with a wall of
text, they won't be able to quickly scan
| | 00:48 | it and work out how relevant it is.
| | 00:50 | If instead you split it up with
headings, subheadings, and bullet points you
| | 00:54 | help people to quickly read through
the important parts to see if they are
| | 00:57 | where they need to be.
| | 00:58 | Another big turn off that users
report is overly distracting advertising.
| | 01:02 | This is obviously a big trade-
off for you as the site designer.
| | 01:05 | On the one hand you might want to make
money from the content you produced, on
| | 01:09 | the other you need to ensure that
people stay around on the site long enough to
| | 01:13 | create the ad impressions you need.
| | 01:15 | The balance will be different
depending upon what kind of site you have.
| | 01:18 | Remember, your visitors
are looking for information.
| | 01:20 | The content you give them needs to
make sense to them, not just to you.
| | 01:23 | They might not have the same level of
knowledge about the topics you cover or
| | 01:27 | the same level of interest in them as you do.
| | 01:29 | You need to make sure that your content
speaks clearly to people right from the beginning.
| | 01:32 | The Back button is only one click away
and you don't often get a second chance.
| | Collapse this transcript |
|
|
2. Don't Get In the Way of the InformationSimple design| 00:00 | The information that your visitors are
looking for is going to be harder to find
| | 00:04 | if it's surrounded by clutter.
| | 00:05 | Simple design doesn't mean boring.
| | 00:07 | What I mean by this is that all
elements of the page should be helping to tell
| | 00:10 | the story, and if they don't
help you should get rid of them.
| | 00:13 | Let's use some examples
to illustrate what I mean.
| | 00:15 | Let's look at Graphical Elements of the site.
| | 00:17 | Site Decoration should help set
the scene for what the site is about.
| | 00:21 | A lawn care site showing neatly
mowing turf for example, or a florist site
| | 00:25 | showing flower arrangements.
| | 00:26 | So the visitors can tell at a
glance that they are in the right place.
| | 00:30 | Images you use should
help to explain your content.
| | 00:32 | Inane, happy, smiley people don't give
visitors any clue as to what your site is about.
| | 00:37 | Also adverts should be relevant for
things that readers are likely to care about.
| | 00:42 | Let's talk about the
textual elements of the site.
| | 00:44 | Cutting the amount of text in
the page helps to be more concise.
| | 00:47 | In my experience it's normally
possible to cut it by 50% compared to what you
| | 00:51 | might have in a print based layout.
| | 00:53 | You also need to find fonts
which are legible on the screen.
| | 00:56 | We'll discuss that in more
detail later in the course.
| | 00:58 | Simplifying is hard.
| | 00:59 | As the site creator you probably were
responsible for putting those things in
| | 01:02 | there in the first place, but be brave,
think like your users and go through
| | 01:06 | your site asking whether each element
is helping or hindering your visitors.
| | Collapse this transcript |
| Consistent design| 00:00 | If it's not clear what visitors
have to do to get the information they
| | 00:03 | want, they will leave.
| | 00:04 | The more time your visitors have to
spend working at how your site behaves the
| | 00:08 | less time they will have your content.
| | 00:10 | Consistent design means having the same
response whenever people perform an action.
| | 00:13 | For instance, every time they click a
text link they should see another page,
| | 00:17 | not a pop-up dialog, a video,
or some other unexpected action.
| | 00:21 | Navigation menus should
always contain the same items.
| | 00:24 | It's fine to open a submenu but not to
hide the main menu that lets visitors
| | 00:27 | move between the major areas of your site.
| | 00:29 | Without that navigational consistency
visitors won't be able to work out where
| | 00:33 | they are on the site and how to
get to other areas they care about.
| | 00:37 | The same is true of wording you use on the site.
| | 00:39 | Although, it's tempting to break out a
thesaurus and find different names for
| | 00:43 | items just to break the monotony.
| | 00:44 | Visitors to your site are relying on
that consistent naming to know where they
| | 00:48 | have been, and what areas to explore next.
| | 00:50 | Calling a feature of Forum in one
location and the Den or Chatroom in another
| | 00:54 | place on the site will make people
wonder whether they are going to see the same
| | 00:58 | thing when they click on those different links.
| | 01:00 | Consistency pays off.
| | 01:01 | Once visitors have learned how your
site works they will be able to turn their
| | 01:05 | focus to your content.
| | 01:06 | Consistent design means they can
learn faster and apply the knowledge to
| | 01:09 | new areas of the site.
| | Collapse this transcript |
| Standard design| 00:00 | Think about how much time you spend on any
one site during a typical browsing session.
| | 00:04 | Now consider what proportion of the
time your visitors are spending on your site
| | 00:07 | compared to all the other sites
that they would visit that day.
| | 00:11 | People spend much more time
on other sites than on yours.
| | 00:14 | They are learning how the web
works from all these other sites.
| | 00:17 | So it makes sense to use a design
layout and navigation that similar to these
| | 00:20 | other sites, in other words,
to use Standard Design.
| | 00:23 | That doesn't mean making things boring.
| | 00:24 | It just means you have to innovate with
your content and not with the container
| | 00:28 | that the content is placed in.
| | 00:29 | Standard Design means using the same
elements as the major sites do and avoiding
| | 00:33 | the elements that they avoid.
| | 00:34 | However, there are two
good reasons to stay standard.
| | 00:36 | The first is the Standard Design is
normally supported by the standard web objects.
| | 00:40 | So you'll get a better cross-browser
compatibility, especially across mobile devices.
| | 00:44 | The second and more important reason if
it is unlikely that your site visitors
| | 00:49 | have the same interest in web trends as
you do, they may not be aware of all the
| | 00:52 | different things that we can do
now with stuff like jQuery Controls.
| | 00:55 | A confused user is a lost user.
| | 00:57 | What kind of standard evolves overtime?
| | 01:00 | For instance, nowadays we've become
quite accustomed to Light boxes, carousels
| | 01:04 | and online video controls.
| | 01:05 | You probably can't even remember
time before Date Pickers existed.
| | 01:09 | But it wasn't that many years ago when
those things were new and average users
| | 01:12 | might be experiencing them
for the first time on your site.
| | 01:15 | It's up to you to work out for your audience,
what it is that's likely to count a standard.
| | 01:20 | It only makes sense to make
your audience comfortable.
| | 01:23 | So work out your users' levels of
expertise and then find standard controls that
| | 01:27 | will make sense to them
when they visit your site.
| | Collapse this transcript |
|
|
3. NavigationElements of navigation| 00:00 | Search might be what brings people to
your site, but navigation often has to
| | 00:04 | step in to get them to the
exact location they need.
| | 00:07 | Research suggests that about 10% of all
tasks fail because of issues with navigation.
| | 00:11 | There are two things that
navigation elements are used for.
| | 00:13 | The most obvious is for moving around the site.
| | 00:16 | The other thing is to help visitors
understand where they are within the site
| | 00:20 | and what else the site offers.
| | 00:21 | In other words, help with
getting situated within the site.
| | 00:24 | When people look at a web page, they
use several different elements to work
| | 00:27 | out whether they're in a
place that can help them or not.
| | 00:30 | They will look at the site's name and
anything in the header area like a tag line.
| | 00:34 | They will look at any images on the
page to see if those are relevant.
| | 00:38 | They will glance the information on
the page and that information could be
| | 00:41 | either the headings or the navigation
menus looking for suitable words that
| | 00:44 | indicate they're on the right path.
| | 00:46 | They might well look at navigation
elements like the main menu structure,
| | 00:49 | breadcrumbs, related link sections, and
so on to see whether these provide clues
| | 00:53 | as to what else the site offers.
| | 00:54 | Once people have worked out where they
are they will probably also want to check
| | 00:58 | out other areas of the site.
| | 01:00 | Now the main navigation menu and
related links sections come into their own.
| | 01:03 | So depending on their task
visitors might use any combination of the
| | 01:07 | navigational elements to first
situate themselves and then look for the
| | 01:10 | content they need. Or to quickly realize that
they are on the wrong site and they go elsewhere.
| | 01:15 | It's important to give some serious
thought to how you will structure the
| | 01:18 | content on your site
preferably before you've even added any.
| | Collapse this transcript |
| Content has a structure| 00:00 | The information you put on your site-
the content- can probably be arranged
| | 00:04 | in more than one way.
| | 00:05 | It's important to work out what the
primary way will be before you build a
| | 00:09 | navigation structure, because otherwise,
you will end up adding more and more
| | 00:12 | menu items as you go along until
the whole navigation is a real mess.
| | 00:15 | Most often content is either
category, audience, or task-based.
| | 00:20 | If the content on your site can be
summed up as verbs-that's doing words-then
| | 00:24 | you have a task-based navigation structure.
| | 00:26 | Here we are looking at a Financial
Product site and navigation is verb based:
| | 00:29 | Balance, Save, Invest, Plan.
| | 00:30 | That creates a task-based navigation.
| | 00:32 | Just be sure to use the words that
your visitors would normally use when you
| | 00:35 | create the navigation labels.
| | 00:37 | People have to understand which
section is most likely to be right for them.
| | 00:40 | If your site's content is nouns-that's
describing words-then it's likely
| | 00:44 | your main navigation will be by
category splitting up the different types of
| | 00:47 | content on a site for instance, by
genre for music or by occasion for florist.
| | 00:51 | Here we have Weddings, Someone Special,
Funerals, Apologies, and Special offers.
| | 00:56 | If instead you have distinct user
types, that is different audiences, you
| | 00:59 | might be designing your navigations to
split the content that it is relevant for
| | 01:03 | each type of visitor.
| | 01:04 | Computer manufactures often do this,
asking you whether you're a Home user, a
| | 01:07 | Small Business, Medium or Large
Business or Public Sector, all because their
| | 01:12 | products different for these groups.
| | 01:14 | Be careful if you choose to do this.
| | 01:15 | Your visitors must be able to tell
which category they are in and they may even
| | 01:19 | be suspicious of your categories.
| | 01:20 | For instance, wondering why small business
computers are cheaper than consumer ones.
| | 01:24 | Of course you don't have to rely on
just one type of navigation structure.
| | 01:28 | You might decide that your content
will benefit from both the category and a
| | 01:31 | task-based menu with audience related
content on the homepage or you might
| | 01:35 | find that you have information that is
better suited to specific form of categorization.
| | 01:39 | For instance, by popularity or for
promoted content, YouTube does this. By
| | 01:43 | Location, for news or local interest
sites, by the time for news or historical
| | 01:48 | sites or for instance by
alphabetical arrangement on a library site.
| | 01:53 | Typically, however these specialist
navigation structures tend to be the
| | 01:56 | secondary navigation on the page
or used deeper within the site.
| | 01:59 | You would still use category,
audience, or task-based navigation as your
| | 02:03 | primary menu structure.
| | 02:04 | So take the time to think about the
best way of categorizing your content.
| | 02:08 | Even if you're working on an existing site,
the sooner you create a good content
| | 02:11 | model, sometimes called the information
architecture, the sooner you can arrange
| | 02:15 | your content in a way that
makes sense to your users.
| | Collapse this transcript |
| Understanding menus| 00:00 | Once you have worked out your
navigational structure-the information
| | 00:03 | architecture-you will want to think
about the best way to display it on the site.
| | 00:06 | This is one situation where
following standard designs is very sensible.
| | 00:10 | There are few tried and tested way of
displaying navigation menus and people are
| | 00:14 | used to seeing them on many other sites.
| | 00:16 | So it is in your best interest to
use the formats that are in place.
| | 00:20 | The two main places that you will see
navigation menus are either as tabs across
| | 00:24 | the top of the site or as a left column list.
| | 00:27 | The main decision is to which of these
you will use is the number of top level
| | 00:31 | menu items you have.
| | 00:32 | If you have a long list of items, say
many music categories, they just won't fit
| | 00:36 | into a single line horizontal format.
| | 00:37 | So you'll use as a vertical list instead.
| | 00:39 | If you have just a few items, for
instance five key tasks that your site
| | 00:43 | supports, then you can choose
either horizontal or vertical.
| | 00:46 | Like we said if you realize there
are different ways of categorizing the
| | 00:50 | information on your site there is no harm in
using both a horizontal and a vertical menu.
| | 00:54 | There are two big user experience
issues with menus that really frustrate your
| | 00:58 | visitors, but which are quite easy to avoid.
| | 01:00 | One of the biggest issues is menus
that visitors can't actually use.
| | 01:04 | Dropdown and flyout menus that are
badly coded can be really hard to click on.
| | 01:09 | People tend to move their mice in
straight lines. Often when selecting a submenu,
| | 01:13 | that means the mouse will
temporarily leave the submenu area.
| | 01:16 | Well-coded menu controls will have a
sufficient lag built-in that they don't
| | 01:20 | disappear during this time.
| | 01:21 | Poorly coded menu controls will
disappear meaning the visitors have to go
| | 01:25 | back and try again.
| | 01:26 | This frustration is often enough
to make people to leave the site.
| | 01:29 | It's especially prominent in older
users and then young children, because they
| | 01:32 | just don't have the motor control to
move the mouse exactly where it needs to go
| | 01:36 | or to move it fast enough.
| | 01:38 | The other big problem is using
confusing terms in your menus.
| | 01:41 | Two big ways of confusing people are to
use industry or company specific jargon
| | 01:45 | and to use made-up names for menu items.
| | 01:47 | Jargon can really turn people off.
| | 01:49 | You might expect that if someone is
coming to your site they already know the
| | 01:53 | jargon related to your industry.
| | 01:54 | However, that's not always true.
| | 01:55 | Oftentimes big companies will use
central purchasing departments to buy things.
| | 01:59 | Those people know all there is to
know about writing contracts, but they
| | 02:02 | don't know your products.
| | 02:03 | They will be much happier to work with
the site that explains things on their
| | 02:07 | terms than they will to struggle through
one that assumes they already know what
| | 02:10 | they are talking about.
| | 02:11 | Company specific terms can be
things like model names or words that the
| | 02:15 | marketing department made up.
| | 02:16 | If you're part of a company you use
those terms everyday so you have a clear
| | 02:20 | picture in your mind of what a X500 widget
does and how that differs from X550 widget.
| | 02:24 | However, your potential customers
probably don't yet have that level of
| | 02:27 | knowledge and they need instead
to be able to select based on some
| | 02:30 | distinguishing factor like power,
size, type of fuel used, or where this
| | 02:34 | device can be used.
| | 02:35 | If you've got menu items that use made-
up words you're probably confusing more
| | 02:38 | of your audience than you expect.
| | 02:40 | You might think that you've made a
great play on words like Floralicious in the
| | 02:43 | example here, but what makes sense to
you as an expert or the site designer may
| | 02:48 | well not translate well to your visitors.
| | 02:49 | The same is true of navigation
attributes that rely on colloquial knowledge.
| | 02:52 | A colloquialism is something like
trouble and strife which is company
| | 02:56 | rhyming slang for wife.
| | 02:57 | It's well-known in some areas, but
completely unintelligible to outsiders.
| | 03:01 | So to sum up, choose a menu location
that works for the number menu items you
| | 03:05 | think you will have and then populate
it with terms that your visitors will
| | 03:09 | understand and can
differentiate from the other menu terms.
| | 03:11 | Make sure if you have submenus, these
are easily accessible using the controls
| | 03:15 | on your site even for people who
are slower mouse users than you are.
| | Collapse this transcript |
| Reviewing some menu myths| 00:00 | There are two rules of thumb that
have sprung up in many designs that don't
| | 00:04 | really have a background in research.
| | 00:05 | Or rather they do, but that
research is being misinterpreted.
| | 00:08 | The first is that all content should be
no more than three clicks away from the
| | 00:12 | homepage or else visitors will lose interest.
| | 00:13 | This just isn't true.
| | 00:14 | Having watched literally thousands of
people using websites I can say that
| | 00:18 | sometimes visitors will lose
interest on just the first page they see.
| | 00:21 | Other times they will continue
clicking through many pages of content.
| | 00:25 | What makes the difference is how likely
they think it is that they will find the
| | 00:28 | information they are looking for.
| | 00:29 | As we have mentioned already they
clues they see in the navigation and the
| | 00:33 | content on your site are
what keep them moving forwards.
| | 00:35 | So it's important to provide them with
a signpost that they need by creating
| | 00:39 | good navigation labels and following
those up with great headings, summaries,
| | 00:43 | and other content within each page so
that visitors are drawn through your site
| | 00:46 | by a strong scent of information.
| | 00:48 | The other concept you might have heard
about is a Seven Plus or Minus Two rule.
| | 00:52 | Applied to menus it states that menu
should be no longer than nine items.
| | 00:55 | Thus seven items plus or minus two items.
| | 00:59 | This rule comes from
psychological research into human memory.
| | 01:02 | It refers to the number of items that we
can hold in our short-term memory at one time.
| | 01:06 | Depending upon the task some people can
hold as many as nine items, some people
| | 01:10 | can only five, but most people, for
most tasks, can hold about seven items.
| | 01:15 | The interesting thing about the Seven
Plus or Minus Two rule is that although it
| | 01:18 | was never based on or designed for
website menus it actually worked quite well.
| | 01:22 | Once you get beyond seven or nine
menu items, it gets harder for people to
| | 01:26 | distinguish the item that they need.
| | 01:27 | So even though you can't necessarily
relate it back to the memory research it's a
| | 01:31 | useful design rule to apply.
| | 01:33 | Just don't be scared to
break it every now and again.
| | 01:35 | If you're going to have long menus it
really helps if you can group the items
| | 01:39 | into similar chunks and
place separators between them.
| | 01:41 | That helps people quickly identify the
relevant chunk and each chunk is likely
| | 01:45 | to be less than seven
plus or minus two items long.
| | 01:49 | So don't worry about the three clicks concept.
| | 01:51 | Instead make sure you always
signpost where your content is.
| | 01:54 | However, it's wise to limit your
regular menus to no more than around seven
| | 01:58 | items in the chunk in order to make
it easier for visitors to parse the
| | 02:01 | information and find the item they need.
| | Collapse this transcript |
| Working with site maps| 00:00 |
Let's face it.
| | 00:01 |
Site maps are normally people's last
resort when they're looking for information.
| | 00:04 |
Once they've exhausted the navigation
and search options, they will try the site
| | 00:08 |
map just in case the items they
are looking for is magically in it.
| | 00:11 |
For that reason it makes sense to
arrange the site map content in a way that's
| | 00:15 |
different to how the
navigation on the site works.
| | 00:17 |
That way it might work better for users
who think about the content differently.
| | 00:21 |
Of course, whatever the structure you
choose must still link up with your site's
| | 00:24 |
content, your category and detail
pages, but this is not an opportunity to
| | 00:28 |
arrange the information in a different way.
| | 00:30 |
Now if you are going to create a site
map that follows a different structure to
| | 00:34 |
navigation, remember that it will
require additional maintenance, because not
| | 00:36 |
only must new content be slotted into
the main navigation structure, but it must
| | 00:40 |
also be placed in the
correct place within the site map.
| | 00:43 |
Old and expired content must also be
removed from the site map when it's
| | 00:47 |
removed from the site.
| | 00:48 |
Site maps have also evolved over time.
| | 00:50 |
It used to be that they'd
appear on their own page.
| | 00:52 |
Although, that's still fine, now you
might well see being shown as a type of
| | 00:55 |
mega menu or in the footer area of every page.
| | 00:58 |
I have a feeling that's mainly an
attempt to improve search engine optimization.
| | 01:01 |
But if it's done well, it
can also help your visitors.
| | 01:05 |
| | Collapse this transcript |
| Adding search to your site| 00:00 | On most Internet sites visitors split
about half and half between preferring to
| | 00:04 | use the navigation menus and
preferring to use a search box.
| | 00:09 | The more content a site has the
more likely visitors are to use search.
| | 00:12 | So make sure that your search
feature is easily accessible to people from
| | 00:15 | every page in your site.
| | 00:16 | Although some sites still format it
differently the standard design for a
| | 00:19 | search feature is to have an empty, unlabeled
field with a button onto its right called Search.
| | 00:24 | The button's action verb
removes the need for a label.
| | 00:27 | Some sites put hint text inside the
search field, but even today that text still
| | 00:31 | causes issues for a proportion of
visitors who don't understand the text will
| | 00:35 | disappear once the field has focus.
| | 00:37 | The standard location for the
search field these days is the top
| | 00:40 | right-hand corner of the page.
| | 00:41 | If for some reason you can't put it
there, the next most common location is the
| | 00:45 | top of the vertical navigation column.
| | 00:47 | Internet is different from other
websites when it comes to search.
| | 00:50 | Internet users tend to perform less
searches and rely more on navigation, mainly
| | 00:54 | because Internet search engines tend to
have trouble extracting meaning from all
| | 00:58 | the messy content on an Internet site
which means the Internet search results
| | 01:01 | aren't as useful as they could be.
| | 01:03 | We found from research that the size
of search box determines the type of
| | 01:07 | queries that people will enter.
| | 01:09 | A small text entry field means
the people enter shorter queries.
| | 01:12 | If people will need to enter longer
queries in order to find the content they
| | 01:15 | want in your site, make sure you give
them a long enough text entry field.
| | 01:19 | If you have any control of your site's
search results page, there are a couple
| | 01:23 | of things you should do to help your visitors.
| | 01:25 | The first is to repeat the
search term on the results page.
| | 01:28 | Repeating it on the page allows people
to see whether they spelled it correctly.
| | 01:32 | Leaving in the search field
allows them to quickly edit it.
| | 01:34 | That's important for refining
searches if the site returns either too many
| | 01:37 | or too few results.
| | 01:39 | Next, list the search results in one list.
| | 01:41 | Each result should take the now
standard format of a line of a link text, a
| | 01:45 | description, and then the URL.
| | 01:47 | Thumbnail photos can be extremely
helpful to guide people to the right content.
| | 01:51 | It's amazing how much information we
can extract from such a tiny image.
| | 01:55 | Again, if you have control over it
the line of linked text should in most
| | 01:59 | instances be the title of the page and the
description text should be the page summary.
| | 02:03 | Search is too important to leave to chance.
| | 02:05 | Formatting your search entry fields and
search result page is only half of the story.
| | 02:09 | You also have to make sure that each
of your pages is well described in a way
| | 02:14 | that your search engine can understand.
| | 02:15 | If you have access to defining the
pages meta tags then use the summary text
| | 02:19 | that you write for each page in the
description meta tag and be sure to create a
| | 02:23 | unique title for each page using the
format we describe in the next chapter.
| | 02:27 | Even if you don't have access to these
HTML elements it's likely that the search
| | 02:30 | engine will pick up your heading or
page title and hopefully your summary
| | 02:34 | paragraph to use anyway.
| | 02:36 | Obviously, all the work that you're
putting into optimizing your site's internal
| | 02:39 | search engine applies just as much to
web searches that people carry out on
| | 02:43 | Google, Bing, or Yahoo!.
| | 02:45 | Spending just a little bit of time
thinking about your page format before you
| | 02:48 | start creating can save you a whole
bunch of hassle later when you want to try
| | 02:52 | and optimize for search.
| | Collapse this transcript |
| Understanding links| 00:00 | The oldest, in fact the defining
feature of HTML is hypertext links.
| | 00:04 | Back in the early days someone-it's not
clear who-decided that link should be
| | 00:08 | blue and underlined. That's
become the standard ever since.
| | 00:11 | Blue isn't necessarily the best color
but the ideas we discussed earlier about
| | 00:15 | using standard elements and being
consistent suggested if blue fits with your
| | 00:19 | site's color scheme, it's
better to use it than other colors.
| | 00:22 | Obviously on pages like the homepage
that are normally covered in links, it
| | 00:26 | doesn't always make sense
to underline your links.
| | 00:28 | In those situations the standard
that has emerged is to have an on hover
| | 00:33 | underline, just remember the more you
deviate from blue underlined links the
| | 00:36 | more likely it is that your visitors
won't see or understand which things on the
| | 00:40 | page can be clicked on and which a merely text.
| | 00:42 | One thing we have no excuse not to do is to
make sure your visited links change color.
| | 00:47 | This color change is a big clue to
user to let them know where they have
| | 00:51 | already been on your site.
| | 00:52 | That way if they are looking for
something they saw before they know which links
| | 00:56 | is like to be behind.
| | 00:57 | Likewise if they haven't found what
they are looking for yet then showing them
| | 01:01 | the places they have already been
allows them to quickly discount those links.
| | 01:04 | Links stand out from the body of the page.
| | 01:06 | And that's not by accident, they
are signposts to say, if you click me we will
| | 01:10 | take you somewhere else.
| | 01:11 | Because links stand out people's
eyes are drawn to them on the page.
| | 01:14 | For that reason it makes sense to place
the link on information rich text rather
| | 01:18 | than cop-out words like click here.
| | 01:20 | That way when people scan the page they
can quickly work out both what the page
| | 01:24 | is about also what topics have
more information associated with them.
| | 01:28 | Often you want to call out specific
information either from the page or
| | 01:32 | related to the page.
| | 01:33 | Related links sections are only used to
take people to other areas of the site
| | 01:37 | to have similar content.
| | 01:38 | These are really useful to redirect
someone who got to the page via a search
| | 01:43 | engine only to find it was almost
but not quite what they were looking for.
| | 01:47 | More Information sections normally
contain links to give deeper information on
| | 01:49 | the same topic like white papers, case
studies, brochures, related parts and
| | 01:54 | accessories and so on. By putting these
links in their own section to the side
| | 01:57 | of the content it makes it easy for
visitors to do the additional research they
| | 02:01 | need to in order to feel confident
about the topic you are discussing.
| | 02:04 | You may also have these links
interspersed in the content.
| | 02:07 | But calling them out in one area
helps visitors to see that you have
| | 02:10 | considered their needs.
| | 02:11 | For a very long pages of content that
you don't want to split up, you might
| | 02:15 | consider using in-page links.
| | 02:16 | These navigate people within the page
directly to the area they are interested in.
| | 02:19 | The only issue with in-page links is
that your visitors might get confused and
| | 02:23 | think they are navigating to a different page.
| | 02:25 | When they read on beyond the linked
section and then hit the Back button they go
| | 02:29 | back to top the same page.
| | 02:31 | If they click a subsequently link it
could be something they have already read.
| | 02:34 | That has a tendency to confuse people.
| | 02:36 | You can reduce that confusion by
labeling your in-page links well, which terms
| | 02:40 | like "on this page" and by putting "back
to top" links at the end of each section.
| | 02:44 | Even if people don't follow the "back to
top" links they will at least understand
| | 02:48 | that they are moving on to
the next section of the page.
| | 02:51 | Breadcrumbs are a type of navigation
that always shows you the path back home.
| | 02:54 | They get that name from the Hansel and
Gretel fairy tale where the children put
| | 02:58 | down crumbs of bread on
the trail to guide them home.
| | 03:01 | Whenever you have hierarchical content
on your site a breadcrumb bar will help
| | 03:04 | visitors work out where they are
within the hierarchy, it will also let them
| | 03:08 | easily move to a
different level of the hierarchy.
| | 03:10 | It's also good for keyword
placement for search engines.
| | 03:12 | Breadcrumbs never replace your
main menu structure, they are a
| | 03:15 | secondary navigation scheme.
| | 03:17 | You need think carefully
before adding them to your site.
| | 03:20 | There is a lot to consider when you
create your links, choosing a suitable
| | 03:23 | graphical treatment with color, font-
weight and underline, placing the link
| | 03:27 | text of descriptive words, deciding even what
supplemental items to link to from each page.
| | 03:32 | Once you start putting real thought into
your links, you will to start to create a
| | 03:36 | better scent of information for your
visitors meaning that they can find what
| | 03:39 | they've been looking for more easily and
will stay around on your site for longer.
| | Collapse this transcript |
| Exploring clickable elements| 00:00 | What about things that don't look like
links, but what you need to make clickable.
| | 00:04 | You obviously won't make images blue
and underlined, so what can you do instead?
| | 00:08 | It seems that website users have got
used to seeing the hand cursor when
| | 00:11 | something is clickable.
| | 00:12 | Most times you get the cursor for
free if you put a link on an image or
| | 00:15 | control like a button.
| | 00:17 | Sometimes however, especially if you are
trying to so something nonstandard, the
| | 00:20 | cursor would stay as a default arrow.
| | 00:22 | In that situation it is up to you to
programmatically change the cursor.
| | 00:26 | Of course, buttons already
have another visual indication.
| | 00:28 | The fact that they have a three-
dimensional look to them, that's one reason to
| | 00:31 | stick with the default controls
provided by browsers, rather than trying to
| | 00:35 | create your own set of buttons from image files.
| | 00:37 | Most people get the up-and-down
button images right, but sometimes they
| | 00:41 | forget the hover version.
| | 00:42 | Flat looking buttons can also confuse
users who wonder whether they are Buttons
| | 00:46 | or Text Entry Fields.
| | 00:47 | Whenever you use images or controls, make
sure that they appear clickable to your users.
| | 00:51 | That may mean, including text links
alongside the images in some cases, so
| | 00:55 | that until people learn they can click the
images, they also have something else to click.
| | 01:00 | The other big thing to you need to
consider, is whether the image or button you
| | 01:04 | have created is actually big
enough for someone to click on.
| | 01:07 | Sometimes you want to extend the
target size beyond the immediate area of
| | 01:10 | the image, but it is better to always make
sure that the image itself is large enough.
| | 01:14 | And in the next section we'll talk
more about what large enough really means.
| | Collapse this transcript |
| Understanding Fitts's Law| 00:00 | In this section we are going go to talk
about how the design of something makes
| | 00:04 | it easier or harder to click on.
| | 00:05 | I am going to start by giving you an
example from web-based email clients.
| | 00:09 | What's the big difference between how
these two email clients implement the
| | 00:12 | button for writing a new email.
| | 00:13 | In case you missed them, here are the buttons.
| | 00:16 | Which system makes it easier for users
to write a new message? Based on just the
| | 00:19 | button the size alone, we can
probably say it's the one on the left.
| | 00:23 | How can we be so sure?
| | 00:25 | Well, it's all about Fitt's Law.
| | 00:26 | Fitt's Law states that it's faster to
hit lager targets closer to you, than it
| | 00:30 | is to hit smaller targets further away from you.
| | 00:32 | Now you are thinking that it should be
easy enough to go off and find another
| | 00:35 | equally apparent statement and make a law
about it that you can attach your name to.
| | 00:39 | The thing is, Mr. Fitts didn't just make the law.
| | 00:41 | He backed it up with science, making an equation
| | 00:45 | that explained how much easier it
would be depending upon all the variables.
| | 00:48 | We don't care so much about the equation;
| | 00:50 | we do care about the implications of the law.
| | 00:52 | And you can see those
implications all around you.
| | 00:55 | The brake pedal in cars is
bigger than the accelerator pedal.
| | 00:57 | It's also closer to you and that make
it faster and easier to hit in an emergency.
| | 01:02 | The button for switching on heavy
machinery is small and recessed;
| | 01:04 | the button for stopping
it is large and prominent.
| | 01:07 | You don't want people to starting
machines by accident, but you do want them to
| | 01:10 | be very easy to stop if there is a problem.
| | 01:12 | In the computer world, you see
the results of Fitt's Law too.
| | 01:15 | Here is a dialog window, notice how
the preferred options are big targets.
| | 01:19 | The less preferred is smaller and it is also
designed as the link rather than as a button.
| | 01:23 | So here is a quiz for you.
| | 01:25 | You can even pause the video to think
about the answer for bit if you want.
| | 01:29 | What's the easiest location on
the screen to use as a target?
| | 01:32 | Pause now and give it some thought.
| | 01:34 | Okay, here is the answer.
| | 01:35 | The position under your mouse is easiest.
| | 01:37 | That's why we use it for context menus.
| | 01:39 | If you said the corners of
the screen, you were close.
| | 01:42 | Think about what happens to the
mouse at the edges of the screen?
| | 01:45 | It doesn't wrap around, it just
stops, so you have the equivalent of an
| | 01:48 | infinitely sized target.
| | 01:50 | It doesn't matter if you overshoot,
because there is nowhere to overshoot to.
| | 01:53 | The corners stop horizontal and
vertical movement, so you don't have to be
| | 01:57 | very accurate at all.
| | 01:58 | You just lurch in the general
direction and still hit the target.
| | 02:01 | Apple actually makes use of mousing in
the corners to makes things happen in
| | 02:04 | the Operating System.
| | 02:05 | How should you use Fitt's Law?
| | 02:06 | Think about the size of the
screen elements you create.
| | 02:09 | Are they a suitable size
for how they'll be used?
| | 02:11 | Radio buttons are tiny.
| | 02:12 | So you have to make the radio
button text label into a target as well.
| | 02:16 | Similarly, hyperlinks that are just one
word long will be harder to click on than if
| | 02:21 | you link a whole phrase.
| | 02:22 | Think about the location of
the screen elements you create.
| | 02:24 | Are the ones that people use most
are likely to be on the path of the
| | 02:28 | user's cursor takes.
| | 02:29 | People tend to move through
screens from top left to bottom right.
| | 02:32 | So it makes sense to put
important elements on that axis.
| | 02:35 | That's one reason for putting commit
buttons on the bottom right of dialog boxes.
| | 02:39 | If you are developing for touch
interfaces, have left enough space between the
| | 02:43 | targets, so that it is simple enough
to stab at one with a finger and be sure
| | 02:47 | to hit the right one.
| | 02:48 | So that's Fitt's Law.
| | 02:49 | It's faster to hit lager target
closer to you, than smaller targets further
| | 02:53 | from you.
| | Collapse this transcript |
|
|
4. Site LayoutPeople can begin from any page on your site| 00:00 | Think about how most are going to find
your site. Unless you have really good
| | 00:04 | name recognition and a massive marketing
budget, it's likely that they will come
| | 00:07 | to you from a search engine
or a link on another site.
| | 00:10 | That means the first page they see
will be somewhat deep within the site,
| | 00:13 | rather than the homepage.
| | 00:14 | So, although the homepage is a good
place to let people know what the site is
| | 00:17 | about, it is not the only
place that you should do that.
| | 00:19 | Every page has to make it clear what
the site is about, where the visitor is
| | 00:22 | within the site and what
they can do from that point.
| | 00:26 | How do you go about doing that?
| | 00:28 | We already talked about how the
navigation elements of the page can set the
| | 00:30 | scene, letting visitors
know what's available to them.
| | 00:33 | But other parts of the page also tell a
story about the site and its contents.
| | 00:37 | In this chapter we will cover the
elements that every page should have to help
| | 00:41 | visitors know where they and what they can do.
| | 00:43 | Once people get to your site, they'll
need to know how it's structured, so they
| | 00:46 | can work their way around it.
| | 00:48 | Some pages on the site act as
signposts, pointing the way by showing
| | 00:52 | summaries of content.
| | 00:54 | This will be your Homepage, Landing
Pages, and Category Pages. Other pages
| | 00:58 | contain more detailed information.
| | 00:59 | These would be Detail Pages,
Product Pages, and Forms.
| | 01:03 | This chapter also talks about how
to lead people through the site with
| | 01:06 | progressive navigation and how to arrange
your content depending upon visitor's tasks.
| | 01:10 | In the subsequent chapters we will
call out the specific things you should do
| | 01:14 | for your Homepage, Category and Landing
Pages, Detail and Product Pages and for Forms.
| | 01:19 | But for now, let's focus on the
things that every page should do for
| | 01:23 | your visitors.
| | Collapse this transcript |
| Elements every web page should have| 00:00 | Let's think about the common elements
you should put on every page in order to
| | 00:04 | help your visitors work out what they doing.
| | 00:06 | It's actually not that hard, but it's
amazing how often sites neglect some of
| | 00:10 | these simple things, and as a result
make it harder for visitors to understand
| | 00:13 | what the site is about,
and what they can do on it.
| | 00:16 | The first and most important thing you
must do is work out what your site is
| | 00:20 | actually about and explain that
in a concise way on the screen.
| | 00:23 | If you can't write a short sentence
that says what the purpose of your site is,
| | 00:28 | then there is no way you are going
to be able to get your visitors to
| | 00:32 | understand what you do.
| | 00:34 | As an example let's say you are a
florist and you have a site that lets people
| | 00:38 | order flowers for delivery, as well
as advertising your physical shop.
| | 00:41 | You have flowers for all occasions from
weddings to prom corsages, to funerals.
| | 00:44 | So what's your site about?
| | 00:45 | Well, it is about getting flowers to
people in a certain geographic area for the
| | 00:49 | events in their life.
| | 00:50 | This suggests a short sentence like
"Ventura Area Flowers delivered for all
| | 00:55 | of life's special events." I am sure that you
can do better than this for your own site.
| | 01:00 | Remember, this sentence is going to
appear on every page of your site, so as
| | 01:03 | well as being descriptive;
| | 01:04 | it is useful if it also includes the
terms that people are likely to search on.
| | 01:08 | You we can make some educated guesses
about what terms to include, but typically
| | 01:12 | for small businesses the product and
geographic area are the most important
| | 01:16 | things to mention, because these
are what people search for most often.
| | 01:19 | For special interest sites,
it's normally the topic.
| | 01:23 | This description becomes your site's tagline;
| | 01:25 | most often the tagline appears
directly under the site logo or name.
| | 01:30 | Make sure it appears on the page's
text, not as a graphic, because search
| | 01:34 | engines can't read the text from within an
image and that would waste all of your hard work.
| | 01:39 | This is a good time to point out that
your site's logo, name, and tagline,
| | 01:43 | should all be hyperlinked to the
homepage, so that if someone clicks on them,
| | 01:46 | they are taken directly to your Main page.
| | 01:48 | This action has become a standard way
of doing things. Although not all users
| | 01:52 | know about it, enough of them do to
make this worthwhile, because lots of
| | 01:56 | visitors, if they have reached your site
through a search engine, would want to get
| | 01:59 | to what they consider to be the top of
the site, to find out more about you.
| | 02:03 | Another place to put in some
descriptive text is in the Page Title.
| | 02:07 | This is the information that shows up
in the browser to identify the web page,
| | 02:11 | it either appears in the Title Bar or
in the Tab directory above the page.
| | 02:15 | Obviously this text gets truncated
quite a bit, especially if people
| | 02:19 | have several tabs open.
| | 02:21 | For that reason you want to lead
with the most important information and
| | 02:24 | probably limit the Title
to 64 characters or less.
| | 02:28 | The Title should be unique for every page,
so the best way to create it is probably
| | 02:32 | to do the inverse of what you do
if you're creating breadcrumbs.
| | 02:35 | In other words just start with a very
brief discussion of the page, then maybe
| | 02:39 | the topic area, if that's relevant
to you, then the name of the site.
| | 02:42 | For our Florist example, this might be
Bridal Bouquets Weddings Hansel Petal
| | 02:47 | Flowers, because we know that when this
is displayed, the most variable piece of
| | 02:52 | the content, the Bridal
Bouquets will show up in the tab.
| | 02:55 | The rest might be hidden from the
user, but it's still really useful
| | 02:58 | information for search engines.
| | 02:59 | You don't need the little words like "and"
or "of". And instead of punctuation, use
| | 03:05 | the pipe character-that long vertical
line-to separate the concepts that you
| | 03:09 | place in the Title text.
| | 03:11 | We covered Navigational elements like
Site Menus and Breadcrumbs in Chapter 3,
| | 03:14 | but it's worth emphasizing again here
that the those navigation controls also
| | 03:18 | have their opportunity to give
visitors a great insight into the contents of
| | 03:21 | your site, so they need to be
given a great deal of thought as well.
| | Collapse this transcript |
| Creating progressive navigation| 00:01 | Ultimately your site is all about
getting information across to your visitors.
| | 00:04 | This information is either going to help
them choose what to buy, to sign up for
| | 00:08 | a service you offer, or just to
let them know more about a topic.
| | 00:12 | Everything else-the Navigation
Structure, the Search function and so on-is
| | 00:15 | only on the site in order to support
this task, to get people to the place where
| | 00:20 | the information lives. Having said that;
| | 00:22 | any site with more than a couple of
information pages is going to need a way to
| | 00:26 | lead visitors to the correct content.
That normally means adding Summary
| | 00:29 | pages that roll up content into
categories. Typically these categories are
| | 00:33 | the same as your top-level menu items.
| | 00:35 | Category Pages of the top-level
pages for each section of the site. They
| | 00:40 | provide an introduction to the collection of
articles that make up a section of the site.
| | 00:45 | Category pages work as a drilldown
point for information within the section.
| | 00:48 | Obviously, they also help by informing
visitors about the key points within the
| | 00:52 | section and allow them
to navigate to sub-content.
| | 00:55 | The Category page is meant to display
just the most important or the most recent
| | 01:00 | information in this area of the site.
| | 01:03 | People can drilldown to more detail by
clicking on the links to Detail Pages, or
| | 01:07 | to Sub-categories if you have those too.
| | 01:10 | So, within Categories,
there are often several topics.
| | 01:13 | A topic it might be ordered around a
particular task, such as planning flowers
| | 01:17 | for a wedding, or around a
specific product, such as types of lilies.
| | 01:23 | On the smaller site, each link on your
Category page might go straight to a Detail page.
| | 01:27 | Once your site reaches a certain
size, you will most likely end up with
| | 01:31 | Sub-category pages for each topic area.
| | 01:33 | These will normally correspond to
submenus on your Main Navigation Structure.
| | 01:38 | Sub-category pages follow a similar
layout to Category pages, with individual
| | 01:42 | detail pages that are
linked off from within the text.
| | 01:45 | This way people can either get
a high-level overview, using the
| | 01:49 | Sub-category page, or drilldown to
read the nitty-gritty by clicking on a
| | 01:53 | link to a Detail page.
| | 01:55 | Detail pages cover only one concept or item.
| | 01:58 | Remember that many users will come
to a Detail page from search or a
| | 02:02 | related links area.
| | 02:03 | For that reason, Detail pages should have
a small introduction so that users can
| | 02:07 | orient themselves and understand
whether they have reached the right content.
| | 02:11 | The Detail page should focus on its core topic.
| | 02:14 | After reading this content, visitors
should have the answers they need and
| | 02:18 | be ready to move on.
| | 02:19 | If other Detail pages contain similar
information, the page should include these
| | 02:23 | in a related links area. This type of
page should also make use of resources
| | 02:28 | links to show downloadable
content, where it's applicable.
| | 02:32 | Detail pages will not usually have an
entry in the main navigation menu, in
| | 02:36 | fact, if you think a Detail page
needs a menu entry, it's probably a category
| | 02:40 | rather than a Detail page.
| | 02:42 | What this layout gives your visitors is
a way to quickly work out what part of
| | 02:46 | your site they need to visit and different
levels of information, depending on their needs.
| | 02:50 | If they came in from a search engine,
the site's navigation components, like
| | 02:54 | Breadcrumbs and Related links, will
help them to quickly work their way up or
| | 02:58 | down the levels of content,
they'll find exactly what they need.
| | 03:01 | Some people might get their questions answered
after reading the summary on the Category page.
| | 03:05 | That's great!
| | 03:06 | You saved them a whole bunch of
time and they'll love for that.
| | 03:09 | Other people will follow the path from
a Category page all the way through to
| | 03:12 | individual Detail page, because the
information they need is very specific.
| | 03:16 | Next, we'll talk about how to format
those Detail pages to help people find the
| | 03:21 | specifics that they care about.
| | Collapse this transcript |
| Arranging your content| 00:00 | Often you have more information on a
topic that completely fits on one screen.
| | 00:04 | There are three main ways of
displaying this information.
| | 00:08 | One, Linear Scrolling page, a series of
Sequential pages, or Splitting the pages
| | 00:13 | by the level of detail.
| | 00:14 | The style you use will depend upon the type
of information you are trying to get across.
| | 00:19 | It used to be that if content wasn't
shown above the fold, in other words, if
| | 00:24 | it didn't display on the screen without
scrolling, then visitors will be unlikely to see it.
| | 00:29 | Now though, scroll wheels on mice and
easy swiping on touch screen devices have
| | 00:33 | made it so that almost all visitors to
your site are likely to be able to scroll
| | 00:38 | down through your content.
| | 00:39 | That means that it's okay to just put
your information in one long page, if you
| | 00:43 | have good reasons not to split up.
| | 00:45 | Those reasons might be, because
splitting it would cause confusion.
| | 00:48 | For instance, people might miss out
part of a list of instructions, or because
| | 00:52 | you expect people to print the page out.
| | 00:53 | For instance, Wikipedia uses this
linear approach, because they cover many
| | 00:58 | different topics, and their model is to have
all the information for each topic on one page.
| | 01:03 | If you do have content that needs to be
kept together, remember they users scan
| | 01:07 | rather than reading, and their
concentration lapses as they get further down the page.
| | 01:12 | So make sure you use plenty of
subheadings to help visitors scan through the
| | 01:15 | page to the path they need.
| | 01:17 | You might also consider using In Page
Links to let people quickly jump to the
| | 01:21 | part of the content they are interested in.
| | 01:23 | Oftentimes though, you can make it
easier for your visitors by splitting the
| | 01:27 | content up for them.
| | 01:28 | If the information you have as
sequential, say an article or a story for
| | 01:31 | instance, a photo gallery, or
training content that has step-by-step
| | 01:35 | instructions, then a
Sequential approach makes sense.
| | 01:38 | What you'll need for Sequential pages is
a descriptive heading on the first page
| | 01:42 | and then headings on subsequent
pages that make it clear that they're a
| | 01:45 | continuation of the article,
for instance, Step 3 or Continued.
| | 01:50 | You'll also want to put Pagination
Controls on the page so that visitors can see
| | 01:54 | how long the article is and
can easily move through it.
| | 01:57 | One thing to consider here is that if
it's likely your visitors will want to
| | 02:01 | print the content out, you should
provide a way for them to either download a
| | 02:04 | PDF version or see all
the information on one page.
| | 02:08 | Sometimes it's better to give people a
high level overview of the content and
| | 02:12 | then let them dive into the
bits that are interesting to them.
| | 02:15 | Splitting topics by level of detail
works best for the content that people who
| | 02:19 | want to research in their own order
and where you don't know the level of
| | 02:22 | knowledge that they are starting with.
| | 02:24 | The Main page contains an overview of
the content and links out to other pages,
| | 02:28 | which each deal with a specific
concept in more detail. This approach also
| | 02:32 | allows you to share content between
several different articles on your site.
| | 02:35 | It might be that you have a common
page describing your returns policy for
| | 02:39 | instance, rather than including that
text in every page of the site, splitting
| | 02:42 | by level of detail allows you to link
to that returns policy page from many
| | 02:46 | different articles on the site.
| | 02:48 | By thinking about what type of content
you have on your site, you can quickly
| | 02:51 | work out which page style to use.
| | 02:53 | Of course, you aren't tied in to using just
one type of content arrangement on your site.
| | 02:58 | You can make some pages Linear,
some Sequential, and some Detail based.
| | 03:03 | The important thing is to make sure
that you have consistency between different
| | 03:06 | pages of the same type.
| | Collapse this transcript |
|
|
5. Writing for the WebHow people read on the web| 00:00 | When people visit your website, they
aren't reading much of your content;
| | 00:04 | instead, they are scanning pages to find a
mention of the items they are interested in.
| | 00:08 | They are getting a feeling for whether
the content on the page will help them
| | 00:11 | find what they are looking for.
| | 00:13 | Using Eye Tracking Technology, we
can see where people look on the page.
| | 00:16 | Here's an example heat map produced by
noting the places where people's eyes rested.
| | 00:21 | Hotter colors like red and yellow,
mean more time spent in those areas.
| | 00:25 | Colder colors like blue
and green mean less time.
| | 00:29 | We can see the people's gaze follows a
kind of F pattern on the page, moving
| | 00:34 | across the page near the top, and
then moving down the left-hand side with
| | 00:38 | movements across the page from time to time.
| | 00:40 | What this means is that the first
paragraphs of the page will get the most attention.
| | 00:44 | Subsequently, it's typically
headings and bulleted lists that get red.
| | 00:49 | Also even for things that people read,
is the first 11 lessons of each chunk
| | 00:53 | that are the most scanned.
| | 00:55 | This tells us what we need
to do to get our point across;
| | 00:58 | we need to put a summary of the
page's content in the first paragraph.
| | 01:02 | We need to make sure that page
headings convey useful information, both about
| | 01:06 | the content and about the
information in the subsequent paragraphs.
| | 01:10 | We also need to frontload
headings and bullet points with the
| | 01:13 | information carrying words.
| | 01:16 | It's only when people get to the
information that they think is what they need
| | 01:19 | that they start reading in more detail.
| | 01:21 | Even then, it is quite normal
for them to skip whole words.
| | 01:24 | As an example look at the sentence on
the screen, count the number of times that
| | 01:28 | the letter F appears in this sentence.
| | 01:30 | I'll give a couple of seconds.
| | 01:34 | How many Fs did you count?
| | 01:35 | Even with the fact that I gave the game
away by telling you about skipping whole
| | 01:38 | words, I wonder whether you saw more
than three, there are actually six.
| | 01:43 | But because most people skip the small
filler words, like "of" in this instance,
| | 01:47 | they often get missed.
| | 01:49 | There is one exception to the skipping
behavior and that's people have lower
| | 01:53 | literacy, either because their
reading level isn't very high or because the
| | 01:57 | site's text isn't in their primary language.
| | 02:00 | For those people, the only way to
understand the text is to read every word.
| | 02:04 | As you can imagine, this can
slow them down considerably.
| | 02:07 | One way that people in this position
cope is by skipping whole chunks of text in
| | 02:11 | order to move through pages faster.
| | 02:14 | The government estimates that around
43% of US adults have basic or lower
| | 02:18 | levels of prose literacy.
| | 02:20 | A lot of those people could
be trying to use your site.
| | 02:24 | The best thing you can do to make a
good reading experience is to create a most
| | 02:27 | concise and easy to read
text that you possibly can.
| | Collapse this transcript |
| Writing for information exchange| 00:00 | People are about 25% slower reading
from a computer screen than from paper.
| | 00:04 | They are also only reading
about 20% of the text on a page.
| | 00:08 | For most sites, they are reading to achieve
some kind of goal, rather than to be entertained;
| | 00:13 | that means you should be as brief as you can.
| | 00:16 | Typically, you can cut out 50% of the
words that you would have used in the
| | 00:20 | print article and still get the point across.
| | 00:23 | Most interesting is if you cut out the
extra text, quite often your visitors'
| | 00:26 | comprehension levels can go up.
| | 00:28 | Cutting out the junk, makes the real
message more understandable, because people
| | 00:33 | are looking for information they get
frustrated with hype and sales pitches.
| | 00:37 | They are researching solutions, which
means they need the key facts upfront
| | 00:41 | supported by in-depth content that
they can read if they care about it.
| | 00:44 | The answer is to think short, short
words, short paragraphs and short pages.
| | 00:50 | If you look at an average web page, it
is written with a lot of unnecessary
| | 00:53 | filler, some of this is marketing
hype, some of it is just woeful.
| | 00:56 | Rather than making your visitors fights
through this text to get the information
| | 01:00 | that they need, do them a
favoring and cut out that junk.
| | 01:03 | You might be thinking
that your useras are different.
| | 01:06 | For instance, may be they are highly
educated, so you think they expect big
| | 01:09 | words and long sentences.
| | 01:11 | If so, bear this in mind.
| | 01:13 | In a study run by Daniel Oppenheimer in
Princeton in 2006 he found that the more
| | 01:18 | complex a piece of text was;
| | 01:20 | the lower readers rate to
the intelligence of the author.
| | 01:23 | In other words, your credibility as a
website creator depends on writing simple text.
| | 01:30 | So, short words,
paragraphs, and pages will all help.
| | 01:34 | Well, what else you can do to
increase the amount of information exchange?
| | 01:37 | Next we'll look at some formatting
techniques that you can use to make key
| | 01:41 | points easier to find.
| | Collapse this transcript |
| Formatting pages for information exchange| 00:00 | Heading and the subheadings are the
highest level of the formatting within your page.
| | 00:04 | They aren't just a way of
splitting up chunks of text.
| | 00:06 | As we saw earlier they are also the
main things that people scan when they look
| | 00:10 | over a page, so make sure that they
are summaries of the content they contain.
| | 00:15 | If you are having trouble thinking
about what words to use in the headings and
| | 00:18 | subheadings, just think about the
words the people would such on to find this
| | 00:22 | content and then use those words.
| | 00:23 | Obviously, the content within each
heading has to match with the words you choose.
| | 00:29 | Try to never use more than three
levels of headings on your pages.
| | 00:33 | If you find yourself using more, it's
probably time to split that content out
| | 00:36 | onto different pages and link back to
it, using the topic page format like we
| | 00:40 | described in the section on
arranging your content, that's in Chapter 4.
| | 00:43 | Another thing you can do to help
visitors out is give them a summary of every
| | 00:46 | page, so they can quickly work out
whether they are in the right place.
| | 00:49 | You often see this in News articles
where the first paragraph is basically a
| | 00:53 | condensed version of the whole story.
| | 00:55 | It works in news articles, it works
on blogs, and it also works on the
| | 00:59 | information sites and ecommerce stores.
| | 01:01 | These summaries are also used for the
description text in search engine results.
| | 01:05 | And as the text you put on category
pages within your site, to let people know
| | 01:09 | what they can find within that category.
| | 01:10 | So you write the summary once,
but you use it in many places.
| | 01:15 | When it comes to body text, you can
borrow another technique from news sites.
| | 01:19 | They use the inverted pyramid style of writing.
| | 01:22 | This tells the whole story in the first
paragraph, then expands on elements of
| | 01:26 | the story bit by bit through the article.
| | 01:28 | It was originally useful in print
newspapers when the journalists didn't know
| | 01:32 | how many column inches
they would have for a story.
| | 01:35 | They had to write so it didn't matter
if the editor cutoff the last paragraphs.
| | 01:38 | From a reader's perspective, it means
that people can stop at any point and
| | 01:43 | still have the main story.
| | 01:44 | Or carry on reading to get more and more detail.
| | 01:47 | Using the inverted pyramid style
online means starting with your conclusion.
| | 01:51 | It's okay, even if you give the whole
story away in the first sentence, people
| | 01:55 | will probably carry on reading.
| | 01:56 | They are after information, so they
will keep working through the text, until
| | 02:00 | they get to the level of detail they want.
| | 02:02 | Giving them the conclusion at the
beginning means they'll know whether they're
| | 02:05 | in the right place within your site or not.
| | 02:07 | After the conclusion, start explaining
the most important facts at a high level.
| | 02:12 | This introduces the key points early,
write in small chunks and give each new
| | 02:16 | idea its own paragraph.
| | 02:17 | After you have dealt with the facts, you
can start giving more background detail.
| | 02:21 | Now, remember in the previous section
we told about by writing 50% less text
| | 02:26 | than you would for printed material.
| | 02:28 | If you've done your job well with the
inverted pyramid, you can simply cut out
| | 02:31 | the bottom half of your text and still
give readers everything they need.
| | 02:34 | Another way of reducing the amount of
text is to use bulleted or numbered lists.
| | 02:40 | Only use numbered lists, if you're
detailing the steps that somebody should
| | 02:43 | take to do something or listing the
order or ranking of a set of items,
| | 02:48 | otherwise, use plain bullets.
| | 02:50 | Eye Tracking stuies show that readers
loves lists, their eyes are drawn to them.
| | 02:55 | Make sure you put the keywords at the
beginning of each list entry, and try to
| | 02:59 | keep each entry relatively short.
| | 03:00 | I mentioned links back
in the Navigation section.
| | 03:04 | But I want to reinforce something again here.
| | 03:06 | Links standout on the page, because
they're a different color and should be
| | 03:10 | underlined. That means that they are
a way of highlighting keywords, so
| | 03:13 | they show up more.
| | 03:14 | It really make sense to write
information rich sentences and then just highlight
| | 03:18 | the keywords to form your link text,
rather than writing the text and adding a
| | 03:22 | Click Here link at the end.
| | 03:24 | That Click Here text tells visitors
nothing when they are scanning the page,
| | 03:28 | whereas the keywords are most
likely just what people are looking for.
| | 03:32 | So, by using clear headings, an
informative summary, and concise body text, you will
| | 03:38 | help get your message across.
| | 03:40 | Lists are a great way of making several
points in quick succession with minimal
| | 03:44 | space, and giving people informative
link text, means they'll know quickly where
| | 03:49 | to go next on your site,
which keeps them engaged.
| | Collapse this transcript |
|
|
6. HomepageUsing your homepage as a site summary| 00:00 | Everything on your site
rolls up to the Homepage.
| | 00:03 | It should say what the site is about
and give launching off points to find
| | 00:07 | what's available, even if visitors to
your site most frequently start deeper
| | 00:11 | within your content pages, because they
have come from the search results page
| | 00:15 | or a link, they are likely to check out your
Homepage if they are interested in your site.
| | 00:19 | Your Homepage needs to
clearly say what the site does.
| | 00:23 | You should phrase this in terms of user need.
| | 00:25 | In other words, how do you
support a need that your visitors have.
| | 00:28 | Back in Chapter 3, we saw that it's
important to explain what your site is about
| | 00:34 | in a concise way and use that for the
site's tagline that appears on every page.
| | 00:39 | All the content on your Homepage
should support this tagline statement.
| | 00:43 | The Homepage is the place to show off the
freshest and most important content on the site.
| | 00:48 | Don't waste space with a welcome message;
| | 00:51 | instead make people feel welcome by
giving them plenty of content to dive into.
| | 00:56 | The Homepage is place to orient people,
give them high-level data, and then
| | 01:00 | point them to the places they
should check out next on your site.
| | 01:04 | The Homepage is also a good
location for links to top tasks.
| | 01:08 | These links might be in the form of
page summary or they could be a list of, "I
| | 01:12 | want to" style navigation
links in the content area.
| | 01:16 | You probably already know what the
top tasks are, but a quick look at your
| | 01:19 | site's server log metrics will tell
you what the most popular content is.
| | 01:23 | The Homepage is one location where
you have a say in what visitors do next.
| | 01:28 | So tell them what you want them to do.
| | 01:30 | In other words, include your call to action.
| | 01:34 | Remember though, it might be too early to
ask people to buy from you at this point.
| | 01:38 | So maybe the call here is to check
out your products or an invitation to
| | 01:42 | learn more about the topics on your
site. Then you can refine the call to
| | 01:46 | action on subsequent pages
| | 01:48 | deeper within the site.
| | Collapse this transcript |
| Creating fresh content| 00:00 |
Homepages often end up as a place
to show off your most recent content.
| | 00:04 |
That content might be News articles, new
products, your most recent blog entries
| | 00:09 |
or new articles that you've added.
| | 00:11 |
Changing the content on your Homepage
frequently is a way to keep it fresh
| | 00:15 |
for returning visitors.
| | 00:16 |
But don't lose sight of the fact that
this page must always say what the site does.
| | 00:21 |
If you only had News items on your
Homepage for instance, it will be possible
| | 00:24 |
that none of those news stories
actually gave new visitors a good
| | 00:27 |
understanding of what you offer.
| | 00:30 |
Remember too, that search engines
are indexing this page as well.
| | 00:33 |
If there is no descriptive content on
the page explaining what you do, then the
| | 00:37 |
Homepage doesn't stand much
chance of showing up in search results.
| | 00:40 |
For those reasons it's important to
make sure that you have some relatively
| | 00:44 |
consistent content on the page that
describes who you are and what you do, and
| | 00:49 |
then set aside other areas of
the page for more frequent updates.
| | 00:52 |
My suggestion for displaying
content on the Homepage, is to use the summary
| | 00:56 |
text we talked about in Chapter 4.
| | 00:57 |
There I said that each detail page
should have a one sentence summary that
| | 01:02 |
describes what the page is about.
| | 01:04 |
Using that Summary text along with a
thumbnail graphic from the page is a great
| | 01:08 |
way of creating short informative
content junk that can be linked directly to
| | 01:12 |
the detail page, so that visitors who
click on it from the Homepage, go directly
| | 01:16 |
to your newest, promoted, or most popular articles.
| | Collapse this transcript |
| Displaying navigation and search| 00:00 | In Chapter 3 we talked about how
your Navigation menu should help people
| | 00:03 | understand the areas of
content that your site offers.
| | 00:07 | That means that the Navigation menu is
an important part of your site summary.
| | 00:11 | Your Navigation menus should show up
on the Homepage in just the same way as
| | 00:14 | they do through the rest of the site.
| | 00:16 | Navigation is a great way to show
what your site offers. These days,
| | 00:20 | people have got used to search being
on the top right corner of the page.
| | 00:24 | A large proportion of your visitors
are going to head straight to search,
| | 00:27 | regardless of the effort you
put into your menu structure.
| | 00:30 | Support that task by making it easy for
people to find and use right from the
| | 00:34 | start, on the Homepage and
on every subsequent page.
| | 00:38 | Some sites use a different template
for the Homepage, seeing it more like a
| | 00:42 | splash screen and only display the
Navigation menus when people get further
| | 00:46 | into the site. That approach might
work if your site has a singular focus
| | 00:50 | or if you really want to get people
started by encouraging them to conduct a search.
| | 00:54 | But why waste all the work you
did in categorizing your content?
| | 00:57 | Showing the menu structure on the
Homepage is a great way of summarizing what
| | 01:01 | information people can expect to find on a site.
| | 01:04 | If search really is the best way of
introducing people to your content, then by
| | 01:07 | all means repeat the search field
in the content area of the Homepage.
| | 01:11 | By being consistent and using the same
location as to display the Navigation
| | 01:14 | menu and search box on your Homepage
template that you do for the rest of the
| | 01:19 | pages on your site, you're
reinforcing what visitors learn in one location,
| | 01:23 | everywhere else across the site.
| | Collapse this transcript |
| The five-second test| 00:00 | If you're not careful, Homepages
can get cluttered quickly and that
| | 00:04 | clutter can lead to confusion.
| | 00:06 | In large organizations everyone thinks that
their content should have a place on the Homepage.
| | 00:11 | Even smaller companies think it's
important to tell people everything they do
| | 00:14 | right from the start.
| | 00:15 | In Chapter 2, we talked about simple design.
| | 00:18 | And your Homepage is one of the most
important places to enforce this rule.
| | 00:22 | The Homepage isn't the place to tell
users everything they can do on your site;
| | 00:26 | instead, it's the place to
set their research in motion.
| | 00:30 | A good rule of thumb is that visitors
seeing your Homepage for the first time
| | 00:34 | should be able to say generally what the site
is about after seeing it for just five seconds.
| | 00:39 | Five seconds might not seem like very
long, but it's typically as much time as
| | 00:43 | it takes for people to form an
impression of a site in their heads, and either
| | 00:46 | decide to keep reading or hit the Back button.
| | 00:50 | How much stuff can people take in during
that five second period? Not very much.
| | 00:54 | To demonstrate what I'm saying,
let's try a five second test now.
| | 00:58 | I'm going to show you a page for just
five seconds, look carefully at it and
| | 01:03 | then decide what the site
is about. Are you ready?
| | 01:07 | Let's start now. And we are done.
| | 01:15 | That was five seconds.
| | 01:17 | Now tell me, what was this site about?
| | 01:19 | What subtopics did it cover?
| | 01:21 | What was the key call to action?
| | 01:23 | What else did you remember about the page?
| | 01:25 | More to the point, did you get a good
enough sense to know whether you wanted to
| | 01:29 | carry on working with it?
| | 01:31 | Even if you don't recall that much
about the site's contents, you probably
| | 01:34 | managed to form an impression about
whether you wanted to keep going or to back out?
| | 01:38 | Because people make these snap
decisions, it makes sense to test whether your
| | 01:42 | Homepage gets its primary
message across in that short time.
| | 01:45 | It's easy enough to do;
| | 01:46 | all you need are some people who meet
the criteria of your personas and the
| | 01:51 | printout of the part of their Homepage
that would appear on the average screen.
| | 01:55 | Now, make a cover sheet that you pull back
in place over the page after five seconds.
| | 01:59 | After people have seen the page for
five seconds, ask one of these questions.
| | 02:03 | "What do you remember about this page?"
| | 02:06 | This tells you what
message has come across most clearly.
| | 02:08 | Or "What is this site about?"
| | 02:11 | This tells you whether your
Homepage has a clear overall message.
| | 02:15 | If you want to get fancy, you can use
online tools, such as fivesecondtest.com
| | 02:19 | or clueapp.com to automate the process,
and then recruit participants online to
| | 02:25 | send to the test page.
| | 02:27 | When you get the results, you can
compare them to your intentions.
| | 02:30 | You know what you want the site to
say to people, on what tasks you want
| | 02:34 | to showcase to them.
| | 02:35 | Now, you can tell whether you Homepage
design gets those key points across, well
| | 02:39 | enough for people to stay on your site
and dive in further or whether they are
| | 02:43 | confused and likely to leave.
| | Collapse this transcript |
|
|
7. Category and Landing PagesShowing people what you've got| 00:00 | As we mentioned in Chapter 4, category
pages are the top-level pages for each
| | 00:04 | section of your site, so they split
the content up into the same chunks as
| | 00:08 | your main navigation.
| | 00:10 | They are summary pages providing key
points about the information within that
| | 00:14 | section and showing links to deeper
or more complete content on underlying
| | 00:18 | topic in detail pages.
| | 00:20 | You can also think of them as
mini homepages for each category of
| | 00:23 | information displaying recent
additions and the most popular content, as
| | 00:27 | well as an overview.
| | 00:29 | In Chapter 5, we talked about the
importance of providing summaries for each
| | 00:33 | detail page on your site.
| | 00:34 | I mentioned how those could be reused as
metadata and in other places around the site.
| | 00:39 | Category pages are one of those locations
where you can reuse the summary content.
| | 00:44 | Choose some of the most popular or most
recent items in each section of the site
| | 00:48 | and put their summary text on the
Category page along with the thumbnail image.
| | 00:52 | This is the same recommendation I gave in the
homepage chapter and there is a reason for it.
| | 00:57 | Providing this consistency through
the site, allows your visitors to easily
| | 01:01 | understand the site's layout and structure.
| | 01:03 | They follow the area they're
interested in from the homepage to the category
| | 01:06 | page, and then, from the category
page through to the individual article.
| | 01:11 | Some high profile articles might
find their way directly to the homepage;
| | 01:14 | but you can also add those
items on the Category page as well.
| | 01:18 | Remember, the Category page probably
has more relevant keywords on it, so it's
| | 01:22 | quite likely that people who come to
your site from a search engine will be
| | 01:26 | dropped on the Category page,
rather than on the homepage.
| | 01:28 | Indeed, Category pages are a great way
of providing additional search goodness,
| | 01:33 | while also helping your visitors.
| | 01:34 | There is no need to keyword stuff,
because the page summaries are already very
| | 01:38 | keyword rich for the topics you cover anyway.
| | 01:42 | Now I want to go back to
Fitt's Law for a second.
| | 01:45 | When you create a Category page, you're
aggregating content from several detail
| | 01:49 | pages into one location.
| | 01:51 | Now, what bit should be clickable?
| | 01:53 | If you're just copying across the heading,
summary text and the thumbnail image,
| | 01:57 | you're really creating the
equivalent of the super menu on the page.
| | 02:01 | So why not make the whole
area into one big target?
| | 02:04 | It's funny seeing tiny click here or
read more links on the page when the whole
| | 02:09 | item could be clickable.
| | 02:10 | It still worth signaling that the item
can be clicked on, by for instance, having
| | 02:14 | an on hover underline for the heading.
| | 02:17 | The only time I wouldn't recommend
making the whole area clickable, is if
| | 02:20 | the pages that you link to, are topic pages
or detail pages with lots of related links.
| | 02:25 | In other words, pages that themselves
have several different items of interest.
| | 02:29 | Here's an example of what I mean.
| | 02:31 | Notice how the summary text contains
several links which all point to different
| | 02:36 | detail pages in this topic area.
| | 02:38 | Sometimes you may also list out other
related links directly underneath the summary.
| | 02:43 | This is most useful on Internet sites
and other places where you can expect
| | 02:47 | visitors to just have a good understanding
of what they're looking for, but where
| | 02:50 | they need a little bit of guidance
actually getting to the right place.
| | 02:53 | The Category page lets them know what
vocabulary you use for the terms that they
| | 02:57 | care about, and helps them choose
between several potentially similar items.
| | 03:01 | Obviously, with all these links, there
is no one place that a single clickable
| | 03:05 | area would take you, so you just have
to make sure that each of the individual
| | 03:09 | link targets is
sufficiently large and descriptive.
| | 03:13 | So, the reason to create category
pages is that they are a great way to help
| | 03:17 | visitors orient themselves on the site.
| | 03:18 | They help people understand what to
expect from each section of the site and
| | 03:22 | they're very heavy in keywords, which
makes them a good candidate for high
| | 03:25 | placing in organic search results.
| | 03:27 | Category pages correspond to
your navigation menu items.
| | 03:30 | If you only have a small quantity of
content on your site, you may not need
| | 03:34 | Category pages, because you can
direct people from the homepage or menus,
| | 03:39 | directly to your detail pages.
| | 03:40 | As your site grows though or if you
already have a lot of detail pages, then
| | 03:45 | Category pages help to keep people on
track, as they navigate through your site.
| | Collapse this transcript |
| Making comparisons easy| 00:00 | On ecommerce sites another use for
Category pages is to help customers compare
| | 00:04 | between similar products that you offer.
| | 00:07 | By listing all the items of one type,
you can help people choose the one
| | 00:10 | that's right for them.
| | 00:12 | The best way to help people compare
things is to emphasize the differences,
| | 00:15 | what's the difference in price,
size, and quality and so on.
| | 00:20 | Obviously, knowing what differences
your customers are likely to care about,
| | 00:23 | allows you to better help
them make those comparisons.
| | 00:27 | Comparison tools don't have to be complex.
| | 00:29 | Sometimes the easiest thing to do is
to show thumbnail pages and then list
| | 00:33 | the key attributes.
| | 00:34 | For instance, here on our Florists
site the attributes that people care about
| | 00:39 | might be scent, color, container type and cost.
| | 00:42 | Listing these three arrangements side-
by-side allows people to compare and
| | 00:46 | choose based on what we
know is important to them.
| | 00:49 | Emphasizing the differences is
important for content-based sites, as well as
| | 00:53 | for ecommerce sites.
| | 00:54 | When you write the detail page summaries,
make sure that you are listing what's
| | 00:58 | unique about that page's content,
that way when the summaries appear
| | 01:02 | side-by-side on the Category page, it's
obvious to your readers that each piece
| | 01:05 | of content is unique, this helps
visitors choose which article is most likely
| | 01:10 | to suit their needs.
| | 01:11 | So remember to always write your
Category pages with comparison in mind.
| | 01:15 | When visitors reach a Category page,
they must quickly be able to choose
| | 01:19 | between the items on the page, whether
they are products or articles, in order
| | 01:23 | to move on and learn more.
| | Collapse this transcript |
| Creating landing pages from ad campaigns| 00:00 | If Category pages are designed to be a
type of organic search attractor full
| | 00:04 | of keyword rich content then landing pages
are the equivalent for page search results.
| | 00:10 | Landing pages are created for targeted
campaigns either from print or online.
| | 00:16 | So they have a singular focus
and a strong call to action.
| | 00:20 | Here we have an ad for Mother's Day
flowers on a Google search results page.
| | 00:25 | If someone clicks through on it, they
see this landing page on our florist's site.
| | 00:29 | This landing page is very similar
to regular Category page, but the
| | 00:33 | information it contains is all about
getting visitors to buy flowers for
| | 00:36 | Mother's Day from this site.
| | 00:37 | Visitors are unlikely to commit to
a big action after just one page.
| | 00:42 | So the landing page should summarize the
information that people can use to make
| | 00:46 | a decision linking off to
more detail from the page.
| | 00:50 | You don't know what level of detail
people will need for each point you make
| | 00:54 | on the landing page.
| | 00:55 | Some will be happy with just the summary.
| | 00:57 | Others will need to drill deeper
depending upon their prior knowledge and how
| | 01:00 | much research they've
already done on other sites.
| | 01:02 | See how similar this concept
is to a regular Category page.
| | 01:05 | The only difference is that all the
information on this page is aimed at getting
| | 01:09 | visitors to check out the focused
content that's related to the ad campaign
| | 01:12 | and to the call to action.
| | 01:15 | You also need to make sure the pages you
link to from your landing page contain
| | 01:18 | the same call to action as your landing page.
| | 01:21 | That way even if someone clicks
through for more detail they will still be
| | 01:25 | reminded of your targeted offer.
| | 01:26 | You may have heard of the concept of
a promotional funnel where you draw
| | 01:30 | visitors to one place and
focus them on the purchase process.
| | 01:33 | Well, that's all very well, but
people won't buy until they've learned
| | 01:37 | enough about the product.
| | 01:39 | Because your landing page could be the
first they've ever seen of your
| | 01:42 | offerings it's unlikely they will go
straight ahead and order at this point.
| | 01:46 | You need to give them the
additional information to browse so they feel
| | 01:49 | comfortable doing business with you.
| | 01:51 | Landing pages also let you track
the efficacy of your campaigns.
| | 01:55 | You set up a different page for each campaign.
| | 01:58 | This is important, because each
campaign will also have a different message.
| | 02:01 | So it needs different content.
| | 02:02 | By seeing which ads drive the most
traffic and which landing pages produce the
| | 02:08 | most conversions you can begin to work
out what designs and wording work the
| | 02:12 | best for your customers.
| | 02:14 | Consider these two adverts that the
florist ran to promote Mother's Day flowers.
| | 02:17 | The advert on the left drew more
people to decide than one on the right.
| | 02:22 | However, the landing page on the right
had a high conversion percentage than
| | 02:26 | the one on the left.
| | 02:27 | That suggests the florist would do
even better next Mother's Day by using an
| | 02:32 | advert like the one on the left
leading to a landing page with a design like
| | 02:36 | the one on the right.
| | 02:37 | So, landing pages are a type of
Category page that have a specific focus and a
| | 02:42 | call to action around a
particular product or promotion.
| | 02:45 | The page will have a similar level
of summary content to other category
| | 02:48 | pages so expect visitors to want to
click on to subpages before they're ready
| | 02:52 | to make their decision.
| | Collapse this transcript |
|
|
8. Detail and Product PagesThe real purpose of detail and product pages| 00:00 | Detail pages are where you give your visitors
the in-depth information they are looking for.
| | 00:05 | If you are an information bearing
site, detail pages is where you lay out
| | 00:09 | individual concepts.
| | 00:10 | If you are hosting a blog, detail
pages are individual blog posts.
| | 00:13 | If you run ecommerce or business site,
detail pages are your product pages where
| | 00:18 | you give visitors the
background on each item you sell.
| | 00:21 | Really, there is no difference between
what people expect to see on the detail
| | 00:25 | pages of an information site like
Wikipedia and a product site like Amazon.
| | 00:28 | They are looking for facts that will
help them understand a topic in more detail.
| | 00:32 | The outcome from researching on Wikipedia
might be deciding what to write in an essay.
| | 00:37 | The outcome from browsing on Amazon
might be deciding what waffle maker to buy.
| | 00:40 | In both cases, visitors are looking
for information and it's up to you to
| | 00:45 | provide it to them in ways that
create a good user experience.
| | 00:48 | There are two key elements to all
detail pages and two additional elements
| | 00:52 | specific for product pages.
| | 00:54 | All detail pages should describe that
topic factually without resorting to
| | 00:58 | flowery language or hype.
| | 00:59 | They should also provide
additional information that helps in the
| | 01:02 | decision-making process such as images,
videos, and whitepapers or datasheets.
| | 01:08 | For product pages, the two
additional elements are showing the price and
| | 01:11 | providing a call to an action.
| | 01:13 | In other words, a way to order the product.
| | Collapse this transcript |
| Writing descriptive text| 00:00 | Like we said right at the beginning
of this course people go online mostly
| | 00:03 | to find information.
| | 00:05 | They have a goal in mind.
| | 00:06 | They might well be comparing the
information on your site to that of other sites
| | 00:10 | in order to actually come to conclusion
either about a topic they're researching
| | 00:14 | or about a product they want to buy.
| | 00:16 | The last thing I want to
see is useless information.
| | 00:19 | In this case useless information
falls into two categories: overly complex
| | 00:23 | language and marketing hype.
| | 00:26 | Back in Chapter 5 we told about the
Oppenheimer study where people thought
| | 00:29 | that authors of articles with
complex language had lower intelligence.
| | 00:33 | This study shows that using complex
language reduces your content's credibility.
| | 00:37 | Interestingly, marketing
hype has a similar effect.
| | 00:40 | Most people can detect marketing hype
relatively quickly and once they have
| | 00:45 | detected it they find it more difficult
to pay attention to any facts that might
| | 00:48 | be scattered in with the hype.
| | 00:50 | So be really careful to make your
content simple to read and high in facts.
| | 00:54 | Also remember that the people
reading your content may not be experts.
| | 00:58 | Even if you run a site on a very
complex topic, or sell highly specialized
| | 01:02 | equipment, the people who visit your
site might be beginners who are trying to
| | 01:06 | find out about the topic or people who
work in the purchasing department rather
| | 01:10 | than in the job who will use your equipment.
| | 01:12 | These people need factual,
descriptive text to get their jobs done.
| | 01:16 | That isn't to say that you
shouldn't sell to audience.
| | 01:19 | Whatever kind of site you have, a
personal blog, a corporate site, or an ecommerce
| | 01:23 | storefront, you are trying to
convince your audience that your content or
| | 01:27 | product is what they are looking for.
| | 01:29 | The easiest way to do this is
typically to be truthful and open with the
| | 01:33 | information that you have.
| | 01:34 | It's also important that your detail
pages provide visitors with things that
| | 01:38 | they can use to sell you to their friends.
| | 01:40 | In other words, you need to give them content
that they can link to or even take and reuse.
| | 01:46 | Things like photos, videos, case
studies, and fact sheets are all helpful to
| | 01:51 | people who want to spread the
word about your product or site.
| | 01:54 | Often even household purchases are
joint decisions and whoever's reading the
| | 01:59 | detail page on your site must be able
to sell their partner on your product
| | 02:02 | before they can buy it.
| | Collapse this transcript |
| Using images to set context| 00:00 | Whether you're running an ecommerce
site or you are just advertising your
| | 00:03 | company's products or services online,
you're at a disadvantage compared to
| | 00:07 | real-life showrooms.
| | 00:09 | When people shop for items in the real
world they like to reach out and touch
| | 00:13 | them and get a sense of things like
shape, size, and manufacturing quality.
| | 00:17 | That's harder to do online.
| | 00:18 | No matter how many words you use
people are going to want to see the product.
| | 00:23 | The best thing you can do is use high
quality photos and sometimes even videos
| | 00:27 | to get visitors as close as possible
to get a showroom or a shop experience.
| | 00:30 | Make sure you provide several views of
the product and that the pictures can be
| | 00:35 | zoomed to see even the smallest of details.
| | 00:37 | Another thing that's important is to help
customers see the size of the things you sell.
| | 00:41 | For instance, if you're a manufacturer
of 3D printers to the uninitiated they
| | 00:46 | may all look like large beige boxes.
| | 00:48 | Showing relative size by having a
person in the shot or having the printer set
| | 00:54 | up in an office or a machine shop
environment will prevent shocks later on.
| | 00:57 | Another thing to display
is what the product does.
| | 01:00 | Show it in action or show what it
produces using our 3D printer example
| | 01:04 | again it'll be great to show the
quality of some of the items that the
| | 01:08 | printer can create.
| | 01:09 | For a waffle maker, show how
scrumptious the waffles it makes look when they
| | 01:13 | come out of the machine.
| | 01:14 | What's important is to get as close
as possible to letting people reach out
| | 01:18 | and touch the item.
| | 01:19 | Multiple angles, high-resolution zoom,
and seeing the product in its natural
| | 01:23 | environment can all help here.
| | 01:25 | Interestingly the same thing is
true for pure information sites.
| | 01:29 | Images help users understand the
concepts you are trying to get across to
| | 01:33 | them, just as long as the images are chosen to
be good examples of the topic being discussed.
| | 01:37 | As an example look at the images that
sites like WebMD use in comparison to the
| | 01:42 | sites that some medical services companies use.
| | 01:45 | The medical services companies tend
to have pictures of models dressed in
| | 01:48 | medical clothes like scrubs or
doctor's coats doing generic things like
| | 01:52 | looking at a computer
screen or writing on clipboards.
| | 01:54 | These pictures say nothing about the service.
| | 01:57 | In comparison the images on the
health information sites are much more
| | 02:01 | task-focused giving helpful information
about the topic that's being discussed.
| | 02:05 | So whether you are adding images to
describe your product or to describe your
| | 02:09 | topic you need to consider
what your visitors need.
| | 02:11 | That is clear, helpful pictures that
let them we see the important concepts at
| | 02:16 | a glance.
| | Collapse this transcript |
| Showing the price for products| 00:00 | If you sell products, the one piece
of information that your customers are
| | 00:03 | looking for is how much does it cost.
| | 00:06 | What's surprising is the number of
sites especially in the business-to-business
| | 00:09 | space if you don't make any mention of price.
| | 00:12 | This is a major
frustration to potential customers.
| | 00:15 | Customers don't want to get involved
with sales people until they've got a good
| | 00:18 | understanding of the
product and its price point.
| | 00:20 | When I ran a large business-to-business
research project a couple of years ago,
| | 00:25 | pricing information was twice as
important to business-to-business purchases as
| | 00:28 | a contact phone number was.
| | 00:30 | That tells you that they want to know
how much your products cost way before
| | 00:33 | they want to talk to you.
| | 00:34 | Now, it might be that you are a
wholesaler with a distributor network, so you
| | 00:38 | don't feel like you can list prices.
| | 00:40 | However, it's easy enough to list a
manufacturer's suggested retail price, and
| | 00:44 | put wholesale prices behind a vendor
login, or, you might sell products that
| | 00:48 | have multiple configurations;
| | 00:49 | for instance, photocopiers that
can have extra paper trays, binding
| | 00:53 | equipment, and so forth.
| | 00:54 | In this situation, it's fine to list
just some common options, so that you give
| | 00:58 | visitors an idea of the price point.
| | 01:01 | Maybe you offer variable cost
service like house-cleaning.
| | 01:04 | In this case, you can give examples
based on common situations, or even let
| | 01:08 | visitors use a cost
calculator form on your site.
| | 01:11 | Whatever you do to show estimated
prices, try to make it happen online rather
| | 01:15 | than resorting to the call-us tactic.
| | 01:17 | Remember, your potential customers are
unlikely to want to talk to you until
| | 01:21 | after they've worked at some
basic facts for themselves.
| | 01:24 | If your pricing structure really is
complex, it's important to explain why you
| | 01:28 | can't provide a quote online.
| | 01:30 | Instead, you might need to provide the
materials that people will need in order
| | 01:34 | to do business with you like request
for proposal of materials or the necessary
| | 01:39 | codes for government contracts and so on.
| | 01:41 | If you really feel that you can't
put prices up, at least give your
| | 01:45 | potential customers a hint;
| | 01:46 | are you the Rolls-Royce equivalent in
your industry, or the pile them high and
| | 01:50 | sell them cheap brand.
| | 01:51 | Help visitors pre-qualify themselves
without wasting their time, and yours.
| | 01:55 | By telling people what price range
your product is in, you help them work out
| | 01:59 | how likely it is that they
will want to do business with you.
| | 02:03 | That can actually save you a bunch of
time fielding calls from people who
| | 02:06 | have no intention of buying a product
because it's either too cheap or too
| | 02:10 | expensive for what they need.
| | 02:11 | Remember, people will be looking
for prices even if you differentiate
| | 02:14 | yourself another way.
| | 02:16 | If you are worried that your prices
don't look competitive, use the pricing page
| | 02:19 | to talk about your feature set, your
warranty, the quality of your product, or
| | 02:24 | whatever else it is that
you feel differentiates you.
| | Collapse this transcript |
| Have a call to action| 00:00 | It should be clear by now that I am
advocating a form of permission marketing
| | 00:04 | where you give information freely first,
then ask for commitment later, rather
| | 00:08 | than requiring a login before you
share any information, or, asking for
| | 00:12 | contact details first, and then
blasting people with information they may or
| | 00:15 | may not want later.
| | 00:17 | But, that doesn't mean you should be timid.
| | 00:19 | If you're trying to get visitors to
do something, then make it clear what
| | 00:23 | you want them to do.
| | 00:24 | Subscribe to your newsletter, comment on
your blog post, hire you, or buy your product.
| | 00:29 | There is an idea from social
psychology called Reciprocity.
| | 00:32 | The theory is that if you give people
something that's useful to them, they'll
| | 00:37 | be more likely to be nice,
and give something back to you.
| | 00:40 | By providing a website that allows them
to find the information that they need
| | 00:43 | quickly, easily, without hype and
without pestering them, you make it more
| | 00:48 | likely that they will react positively
when you ask them for a favor in return.
| | 00:51 | So, go ahead and ask, make it clear
what you're offering, and how it's
| | 00:55 | valuable to your visitors.
| | 00:56 | For ecommerce sites, that's pretty simple.
| | 00:59 | Your product pages should have
easy ways to buy the items on display.
| | 01:03 | For blog sites where your goal may be
to spread your influence through social
| | 01:07 | media, you will need to make it
easy for visitors to like, re-tweet,
| | 01:10 | subscribe or email your content, and
it doesn't hurt to ask in text as what
| | 01:15 | is providing the buttons.
| | 01:17 | Just make sure that your request is in
balance with the idea of reciprocity.
| | 01:21 | Don't expect people to give you their
email address, home address, and phone
| | 01:24 | number just for showing
them some basic information.
| | 01:27 | They will need to feel that there is
real value for them in sharing their
| | 01:30 | details with you or making a purchase,
which means your site's content must
| | 01:34 | really hit home with them first.
| | Collapse this transcript |
| About Us: a special detail page| 00:00 | One detail page that you really want to put
on your site and also link from your
| | 00:04 | navigation menu is the About Us page.
| | 00:07 | No other page does more for
establishing visitors' trust in what you offer. In
| | 00:11 | fact, the About Us page might as well
be called the, Can I Trust You page.
| | 00:16 | Because your online visitors may never
meet you in person, they need a way of
| | 00:20 | knowing more about you, so they can be
sure you're okay to do business with.
| | 00:23 | Or that the information
you're providing is accurate.
| | 00:26 | Think about what that means for your site.
| | 00:28 | Your About Us page is the best
location to provide the details that will help
| | 00:32 | someone to trust you, like all the
other detail pages on your site, the content
| | 00:36 | here should be truthful and open.
| | 00:38 | If you have a physical location,
tell people the address, include a
| | 00:41 | professional looking image of the
building, or even the interior of your
| | 00:44 | location if that makes sense.
| | 00:46 | Say who you are, including contact
details, at a minimum link to a Contact Us
| | 00:51 | Form, but it's much better to
provide an email address and phone number.
| | 00:56 | If you're providing a service, say
what hours you are available, either your
| | 00:59 | store hours or your phone hours
and say what time zone you're in.
| | 01:03 | Give visitors some history, how long
you have been in business, and what makes
| | 01:07 | you good at what you do.
| | 01:09 | If you provide a service, mention some
clients, mention your business's size and
| | 01:12 | other pertinent facts.
| | 01:14 | You may also want to provide links to
your policies, what work you do in the
| | 01:18 | community, frequently ask questions,
and other content that will help people to
| | 01:22 | understand if you're a
good match for their needs.
| | 01:24 | It might seems strange that we are
calling out this one particular page, but
| | 01:28 | About Us content can make or break
a relationship with your visitors.
| | 01:32 | In studies I run, participants look
for whatever proof they can find that the
| | 01:36 | website they're on is trustworthy.
| | 01:38 | The About Us page is your one big
chance to make a good impression.
| | Collapse this transcript |
|
|
9. FormsAsk for information in context| 00:00 | It's likely that if you are asking your
visitors to interact with you and give
| | 00:04 | you some information,
you'll need to use a form or two.
| | 00:07 | Forms are a special kind of interface,
because they require people to follow
| | 00:10 | instructions and give
sensible information to you.
| | 00:13 | Filling in forms is not normally high
on people's list of enjoyable activities.
| | 00:17 | So, how do you create a good user
experience around a disliked activity?
| | 00:21 | The short answer is you make
it as painless as possible.
| | 00:25 | The easiest way to get good
information from people is to make sure they
| | 00:28 | understand why they're
giving the information to you.
| | 00:30 | That means asking questions that are
focused on the task at hand and not
| | 00:34 | slipping in ten other marketing
questions you feel might be useful to you
| | 00:38 | somewhere down the line.
| | 00:39 | It also means asking the questions
at the right time in the interaction.
| | 00:41 | For instance, there is a large
difference between asking people to provide
| | 00:45 | registration details before you let
them browse your site, and asking them for
| | 00:48 | exactly the information in a checkout process.
| | 00:51 | In the first instance, people are
likely to see it as a barrier and just back
| | 00:55 | away from your site, but if they have
already committed to making a purchase,
| | 00:59 | they will see the purpose
for giving you the information.
| | 01:02 | In the second case, you presented the
form at the right in the interaction, and
| | 01:05 | it doesn't just have to be for checkout.
| | 01:07 | Red Hat, the Linux software form
found that removing capture forms that
| | 01:11 | they used to collect visitor information
increased the viewing of white papers by 95%.
| | 01:15 | There is a lot more people getting
important information and understanding how
| | 01:19 | Red Hat could help them, rather than
being scared off by questions that asked
| | 01:23 | for information they
weren't prepared to give yet.
| | 01:26 | So, if you are going to ask people for
information, make sure you do it at the
| | 01:30 | point in time where they see
the value in giving it to you.
| | 01:33 | In other words, when they prepared to
reciprocate for some informational service
| | 01:36 | you have already given to them
| | 01:37 | Downloading some software is a great
chance to ask for something from your
| | 01:41 | visitors, they should see the value in
the trial software, but they will weary
| | 01:45 | about giving away too much information,
because they still haven't made up
| | 01:48 | their minds to buy.
| | 01:49 | This interface tells people what
they'll get, a few emails with tips and
| | 01:53 | tutorials, and what they won't get-it
says clearly their email isn't shared-in
| | 01:57 | return for being able to
download the trial software.
| | 02:00 | This makes the transaction
quick and relatively painless.
| | 02:03 | Forms are a big deal;
| | 02:06 | people don't like filling them out.
| | 02:08 | They particularly don't like answering
marketing questions they don't see the value in.
| | 02:12 | Or questions they know will be used to
send them information they probably don't
| | 02:15 | want. The answer is to ask the smallest
number of questions possible and to do
| | 02:21 | it in context at a time when your
visitors are ready to reciprocate.
| | Collapse this transcript |
| Making forms as painless as possible| 00:00 | If a form looks too
daunting people won't fill it out.
| | 00:04 | If the form is forced on them when
they aren't ready to share they will be
| | 00:07 | likely to fill it and in with false information.
| | 00:09 | Several years back I worked
closely with the Hotmail email team.
| | 00:12 | When people registered for a Hotmail
account, they had to give their ZIP code.
| | 00:16 | This was mainly to help Hotmail target adverts.
| | 00:19 | It was amazing how many users of the service
apparently lived in Beverly Hills, California.
| | 00:24 | Obviously, they didn't really.
| | 00:26 | But lots to people who entered the ZIP
code 90210, because they knew it from a
| | 00:30 | popular TV show called Beverly Hills, 90210.
| | 00:33 | Basically, they circumvented the form
with false information because they didn't
| | 00:37 | see the value in providing their real data.
| | 00:39 | The way to avoid these issues is to
make the form as concise as possible and
| | 00:43 | to make sure people realize the reason you
are asking for each piece of information.
| | 00:47 | Sometimes it might even be better to
hold off on asking for some information
| | 00:50 | until you have a better
relationship with your customer.
| | 00:52 | How do you make sure people
give you the data you need?
| | 00:56 | Well, first make sure
you're asking sensible questions.
| | 00:59 | Just like the other pages on your site
give the form a descriptive heading and a
| | 01:02 | summary line of text explaining its purpose.
| | 01:05 | If the form asks for more than one type
of data, you can use subheadings within
| | 01:09 | the form to separate the areas.
| | 01:11 | Again, these subheadings should be
descriptive telling users what you are
| | 01:14 | asking for and why.
| | 01:16 | Then make sure that the labels you use act as
instructions to help people fill out the form.
| | 01:21 | For instance, just putting the label
password next to a field doesn't help
| | 01:25 | people as much as if you add the
context of Enter a new password.
| | 01:29 | Now anyone filling out the form
knows exactly what you want from them.
| | 01:33 | A new password rather than spending time
worrying about whether they already had
| | 01:37 | a password set up for the site.
| | 01:39 | As an aside, let me just point out that
it doesn't really matter whether you put
| | 01:42 | the labels above the
fields or to the left of them.
| | 01:45 | If you're using instructional style
labels, they're going to end up a bit longer.
| | 01:49 | That suggests putting them above the fields.
| | 01:52 | If you have a longer form, putting the labels
to the side will make it appear a bit shorter.
| | 01:57 | Left aligning all the labels makes it
slightly harder for people's eyes to scan
| | 02:01 | between the label and the associated field.
| | 02:03 | So I'd suggest right aligning and the
aligning all the items in the form along
| | 02:07 | the left edge of the form fields.
| | 02:09 | Whatever style you end up choosing,
above or to the side, stick to it throughout
| | 02:14 | your form and use the same
style on every form on your site.
| | 02:17 | That keeps the interface consistent
and helps visitors quickly learn the
| | 02:21 | layout of your forms.
| | 02:23 | What is important is to only
use a single column of fields.
| | 02:26 | If you put two columns side by side it
makes the form harder to scan and often
| | 02:31 | people will completely miss
filling out the right-hand column.
| | Collapse this transcript |
| Creating form fields| 00:00 | Now let's talk about the
individual fields on your form.
| | 00:03 | You've properly seen some forms
where every field is the same length.
| | 00:06 | That may look neat, but it's
essentially unhelpful to visitors.
| | 00:10 | When people see fields of different
lengths it gives them clues as to how much
| | 00:13 | information you expect them to provide.
| | 00:15 | Phone numbers are a different length to
credit card numbers which are different
| | 00:19 | length to card verification numbers.
| | 00:21 | Using fields of the correct size helps
people work out what information to put where.
| | 00:26 | You should also help people out by
giving them a clue as to which fields are
| | 00:29 | required and which aren't.
| | 00:31 | The typical way to do this is to use
an asterisk, that's a star, next to
| | 00:35 | the required fields.
| | 00:36 | Another way to help people
is to limit their choices.
| | 00:40 | A dropdown list box or set of radio
buttons means that people get to pick from a
| | 00:44 | set of options rather than
having to think about what to type.
| | 00:47 | In terms of human memory
recognition is much easier than recall.
| | 00:50 | As long as you've put the right options
on the page it's easier for someone to
| | 00:53 | just make a selection than it is to
have to start from an empty field.
| | 00:57 | It also allows you to make a default
suggestion so long as that default is
| | 01:01 | in line with what most visitors want,
it will reduce the time it takes them
| | 01:05 | to complete the form.
| | 01:06 | When you start putting controls on the
page, make sure you use the correct one.
| | 01:10 | Radio buttons and checkboxes
are different for a reason.
| | 01:13 | Checkboxes let your visitors choose
one, some, all, or none of the options.
| | 01:19 | Radio buttons only let them choose one.
| | 01:21 | Knowing where the name comes from
will help you remember which one to use.
| | 01:25 | Old car radios used to have
buttons to choose a station.
| | 01:28 | These were physically
connected to the tuning controls.
| | 01:30 | Only one could be pushed in at any
time, because you could only listen to
| | 01:33 | one station at a time.
| | 01:35 | When you pushed a different one in, it
popped the currently selected one back out.
| | 01:40 | Just as a reminder, here is one case
where Fick's Law comes into effect as well.
| | 01:44 | The target size of checkboxes
and radio buttons is really small.
| | 01:48 | The solution is to make sure
that the text is clickable too.
| | 01:51 | This should happen automatically in
most modern browsers, but please check it's
| | 01:54 | working for your forms.
| | 01:56 | Radio buttons and checkboxes are also the
exception to the labels to the left rule.
| | 02:01 | Use the checkbox or button is a bullet
point so the label goes to the right and
| | 02:05 | put each option on its own line,
because otherwise it's how to tell which
| | 02:09 | selector goes with each label.
| | 02:11 | Another way to make form filling faster and
more accurate is to add Help text in line.
| | 02:17 | People won't always click on help links
in a form, because they're scared they
| | 02:20 | will be navigated away from the
page and then lose their information.
| | 02:24 | If you instead put the help text
alongside the form information, it lets them
| | 02:27 | see what's required without
the risk of leaving the page.
| | 02:31 | Before you write any help text though,
see whether you can make visitors lives
| | 02:34 | easier by making sure the field
labels are clear as they can be.
| | 02:38 | A well laid out form shouldn't
need masses of extra help text.
| | 02:42 | One final thing about form layout.
| | 02:44 | Back in the mist of time, the
default buttons at the bottom of the form
| | 02:48 | was Submit and Reset.
| | 02:49 | Please do not put a reset button on your forms.
| | 02:52 | The pain that this button inflicts
on people who accidentally click it is
| | 02:55 | not worth the hassle.
| | 02:57 | Also, try and use a verb on the
submit button that sums up what's going to
| | 03:01 | happen once the user clicks it.
| | 03:03 | For instance, register or sign up
for newsletter or request information.
| | 03:08 | Any of these are more educational than
the word Submit and they help customers
| | 03:12 | understand what is they will get
as a result of completing the form.
| | 03:15 | You might want to put a Cancel
option on a page, more as a reassurance to
| | 03:19 | visitors any the data
they've typed in won't get sent.
| | 03:22 | But if you do, make sure it has less
visual weight and is physically removed
| | 03:26 | from the submit button so that it
doesn't get click on accidentally. And when
| | 03:30 | people press the submit button make
sure you reassure them that their data made
| | 03:34 | it through by providing a confirmation screen.
| | Collapse this transcript |
| Handling errors gracefully| 00:00 | Now let's talk about how
to handle errors in forms.
| | 00:03 | Even with the best instructions and
the clearest fields people may still
| | 00:06 | make typing mistakes.
| | 00:08 | Of course, you want to do your best to
catch errors before they cause people trouble.
| | 00:12 | Any error is going to be disheartening
to your visitors and errors in forms are
| | 00:16 | big cause of abandonment.
| | 00:17 | Some errors aren't really errors as
such, but are just misunderstandings made
| | 00:21 | because the computer didn't
understand the format of the entry.
| | 00:24 | One way to stop these errors
is to use forgiving formats.
| | 00:28 | For entries like phone numbers let
people enter spaces or parentheses as they
| | 00:32 | see fit and then the computer can strip
that information away before it checks
| | 00:36 | that the entry is valid.
| | 00:37 | It's also best to do validation of each field.
| | 00:40 | That way you can try and catch errors as
they happen and let people know in line
| | 00:44 | that the field needs
attention before they submit the form.
| | 00:47 | If people do make an error filling in
the form, you need to help them correct it
| | 00:51 | without scaring them off.
| | 00:53 | If you found issues after they've
submitted the form, you're going to need to
| | 00:56 | walk people through the errors
so that they can correct them.
| | 00:58 | The way to do this is to put a
description of the error at the top of the form.
| | 01:03 | This should indicate the
number of errors and list them.
| | 01:06 | Be careful not to use language
that blames your customer though.
| | 01:08 | These listed errors can be links
to take the user directly to the
| | 01:12 | corresponding field.
| | 01:13 | Also, highlight each field that has a problem.
| | 01:15 | One of the most effective ways that
I've seen during user testing is to turn
| | 01:19 | the field border red.
| | 01:21 | You should also add a message for
each problem that describes what the
| | 01:24 | entry should look like.
| | 01:26 | Maybe using an example from the data or
tips on common errors like when people
| | 01:30 | provide a user name
rather than an email address.
| | 01:33 | If you can manage it technically, one
of the most forgiving ways of getting
| | 01:36 | people to correct problems is to just
show them the fields they need to attend
| | 01:40 | to rather than displaying
the whole form all over again.
| | 01:44 | This often makes the error correction
experience seem much less daunting as only
| | 01:48 | a few fields are shown on the screen.
| | 01:50 | Forms can be a big source of confusion
and frustration for your visitors and
| | 01:54 | this can really hurt your user experience.
| | 01:56 | I really suggest that you spend the
time to usability test your forms with
| | 02:00 | representative users.
| | 02:01 | That means people who meet
your persona description.
| | 02:04 | Give them a task to complete that
involves filling in the form and then sit back
| | 02:08 | and watch them go through the process.
| | 02:10 | Thinking out loud as they do it.
| | 02:12 | You've learned a lot about a potential
traps in your form design from this activity.
| | 02:16 | It's a great investment and it makes
sure that your real customers don't find
| | 02:20 | the same frustrations.
| | Collapse this transcript |
|
|
10. Using Media to Help Tell Your StoryUsing different types of media| 00:00 | No doubt a website with no graphics
could look boring, it might turn people
| | 00:04 | away. But that's not an excuse to just
pile photos, videos and graphics onto
| | 00:08 | every page without thinking
about why you're doing it or what the
| | 00:11 | consequences might be.
| | 00:12 | Think about the purpose of adding
every image you put on the site.
| | 00:15 | Does it help tell a story or get across
the concept that's the focus of your content?
| | 00:19 | Also consider what benefit the items offers
that couldn't be done with a simpler form.
| | 00:23 | For instance, do you really need a video
or would a still image provide just the
| | 00:28 | same explanatory power?
| | 00:29 | Believe it or not bandwidth is still an
issue, even though most people now have
| | 00:33 | fast Internet connections to their homes,
they don't always have the same speed
| | 00:37 | of connections on their mobile devices,
and if you've ever tried connecting on a
| | 00:40 | public WiFi network, you know
how painfully slow that can be.
| | 00:43 | So don't go wild with
masses of content on your pages.
| | 00:46 | Page load time is just as important now
as it ever was, and the more resources
| | 00:51 | the page requires, the longer it's
going to be before your visitors can start
| | 00:54 | reading through and finding
the information they want.
| | 00:57 | Video, Audio, Live web Casts, Podcasts,
Photo Galleries, even Animated Gifs can
| | 01:02 | all have a place on your site,
but only if they are used correctly.
| | 01:05 | What I mean by correctly is whether
you've used the right type of media to get
| | 01:09 | your message across.
| | 01:10 | For instance, a photo gallery might be
a great way of showing off your product
| | 01:14 | in a natural setting, but might not
be so useful for weekly news summary.
| | 01:17 | The podcast might be better for the
news summary, if you know that the large
| | 01:21 | majority of your visitors are
technically adept enough to manage podcasts,
| | 01:24 | whereas video might be a better option, if
you know that people will be coming to
| | 01:28 | the site for the information, and if
you have the type of content that goes
| | 01:32 | well in video format.
| | 01:33 | And animated gifs are making a comeback.
| | 01:34 | They can be really useful to show
things like how a product gets assembled or a
| | 01:38 | fast indication of the steps in the process.
| | 01:40 | In these situations the animated gifs act
more like a slideshow than a mini movie.
| | 01:44 | So, feel free to add multimedia
content, but always ask yourself what's the
| | 01:48 | purpose, what visitor need does this
content serve, and is this the best
| | 01:52 | format to meet that need?
| | Collapse this transcript |
| Simple question: Does it enhance the experience?| 00:00 | However cute you might think it is to
look at animated GIFs of dancing hamsters
| | 00:04 | all day long, it's unlikely that the
hamsters are doing much to make your site
| | 00:07 | useful to your visitors.
| | 00:08 | In comparison, although it initially
seems frivolous, a video of an iPhone being
| | 00:13 | shredded in the blender
might be totally acceptable.
| | 00:15 | If your site is the one selling the blender,
it demonstrates just how strong the motor is.
| | 00:20 | Graphics, videos, and such can be
entertaining, and definitely the entertainment
| | 00:23 | value adds to their capacity to go viral.
| | 00:25 | But, the big question is, does the
multimedia element you're adding enhance the
| | 00:30 | experience for your visitors?
| | 00:32 | Splash screens might well set a mood, but
the typical mood they set is impatience.
| | 00:36 | There aren't many messages that can be
put across better on a splash screen than
| | 00:40 | on your site's homepage.
| | 00:41 | They aren't doing anything to
enhance the experience for your visitors.
| | 00:44 | Instead, they are just telling people
how much the site cares about its own
| | 00:48 | looks rather than about
providing useful information.
| | 00:51 | Think about times when you've been on
sites, and the media has done anything but
| | 00:54 | enhance the experience.
| | 00:55 | I'm talking about when you navigate to
a site, and music starts playing in the
| | 00:59 | background, or a video auto-plays.
| | 01:01 | Not only is this shocking to us, it
can also be embarrassing if we are in an
| | 01:05 | office with other people who not
automatically think we're goofing off.
| | 01:08 | It's even worse when the video that
plays is an advertisement on the site rather
| | 01:12 | than the content that's even
produced by the site itself.
| | 01:14 | Apart from the obvious frustration
issues, there are other reasons not to
| | 01:17 | auto-play the content on your site.
| | 01:19 | If the media isn't at the top of the
page, then it might be halfway through
| | 01:22 | playing before people get to see it.
| | 01:24 | Instead, have a clear Play
button and a clear Mute button.
| | 01:28 | Another issue is when you use media
formats that require special plugins, or
| | 01:31 | need the latest and greatest version,
when do this, you're immediately limiting
| | 01:35 | the number of people who
would be able to use the media.
| | 01:38 | Everyone else sees a really ugly
space in the page, and maybe an error
| | 01:41 | message from their browser.
| | 01:43 | In my experience, users tend to associate
these plugin requests with broken sites.
| | 01:46 | In other words, they will think that
the problem lies with your site, rather
| | 01:50 | than with their computer.
| | 01:51 | And in some ways, they are right.
| | 01:53 | The problem is that you didn't
anticipate the technical environment your users
| | 01:56 | would have available.
| | 01:58 | Sometimes, it's hard to be objective
about a piece of multimedia content.
| | 02:01 | You love it, and you want
to share it with the world.
| | 02:04 | However, remember that your site
visitors may not share your tastes.
| | 02:08 | Think carefully about your visitor's
goals on the site, and ask yourself, does
| | 02:11 | this content really enhance their experience?
| | Collapse this transcript |
| Using graphics for explanation, not decoration| 00:00 | One of the key themes of this course has been
to simplify the user experience on your site.
| | 00:05 | Taking away non-essential items
leaves more space for visitors to see
| | 00:09 | the important pieces.
| | 00:10 | Every part of the page is valuable, so
don't waste it with useless graphics.
| | 00:14 | Make sure you are using graphics for
explanation, not just for decoration.
| | 00:18 | That's not to say you must
not use decoration on your site;
| | 00:21 | a good visual style can
help set the tone of your site.
| | 00:23 | Logos and decorative elements in the
header, footer, and margins might well
| | 00:28 | be part of your style.
| | 00:29 | However, these decorative elements
should match the color scheme and style of
| | 00:32 | your site and shouldn't draw
attention away from the content.
| | 00:35 | They should also be as
information-rich as you can make them;
| | 00:38 | for instance, showing flowers or floral
patterns on our florist's site, so that
| | 00:42 | they help visitors
understand what the site is about.
| | 00:44 | Where you want to avoid using purely
decorative content is in the body area of
| | 00:48 | your pages where visitors
are looking for information.
| | 00:51 | To drive that point home, consider this,
Jens Riegelsberger and his colleagues
| | 00:55 | at University College London looked at the
impact of using stock photography on websites.
| | 01:00 | What they found was that although
the perceived trustworthiness of poorly
| | 01:03 | performing vendors was increased when
they used stock photography, perceived
| | 01:06 | trustworthiness of vendors with
good reputations was decreased.
| | 01:10 | Now, assuming that your site currently
has a good reputation, what impact do you
| | 01:14 | think stock photography is
going to have on that reputation?
| | Collapse this transcript |
| What is interactive content?| 00:00 | Interactive Content means items that
you place on your site that allow visitors
| | 00:04 | to use the mouse or touch gestures to
move items around, rearrange them, or
| | 00:08 | change options to configure something.
| | 00:10 | This dynamic content is often used for
3D interactions like Google Street View
| | 00:13 | or for car configurators, and for
features such as scrollable timelines and new
| | 00:18 | stories around history science.
| | 00:19 | Interactive Content can
help you in several situations.
| | 00:22 | Animations on your site can educate
visitors by showing them where an item
| | 00:26 | ends up after an action.
| | 00:27 | For instance, to let people know how
to see what's in the shopping cart by
| | 00:31 | animating items into it after
the customer clicks the Buy button.
| | 00:34 | Configuration tools that allow
manipulation can help people to see the effects
| | 00:38 | of different options.
| | 00:39 | For instance, how bright an LCD
projector's image will be at different distances
| | 00:43 | from the screen, or how a new car
will look with different trim choices.
| | 00:47 | Online photo editors that show how an
effect will look as soon as it's selected
| | 00:50 | provide useful and immediate feedback.
| | 00:53 | Most situations use this type of
content to show what the result will be, are
| | 00:57 | potentially good uses of interactivity.
| | 00:59 | It also helps when entertainment
is a large part of the process.
| | 01:02 | But, there is a downside too.
| | 01:04 | Many people can't use Interactive
Content, either because their browser doesn't
| | 01:08 | support the unusual plugins that are
required, or because Flash, or other
| | 01:12 | plugins, aren't available on their mobile device.
| | 01:14 | For some people, it's because their reaction
times or motor skills might not be sufficient.
| | 01:19 | Then, there are the people who could
use it but don't want to because they
| | 01:23 | aren't online to play games.
| | 01:24 | This is especially true of repeat
visitors who've seen the content several
| | 01:28 | times already, and just want to get through
to the outcome with a minimum possible fuss.
| | 01:32 | So, the best usage for Interactive
Content are to teach visitors concepts of
| | 01:37 | features, to demonstrate the effect of
choosing different options, and to give
| | 01:40 | immediate feedback when people
perform an action on your site.
| | 01:43 | But, you should also offer a non-dynamic
alternative to the interactive content.
| | 01:48 | It might not be as stunning to look at or as
fun to work with, but it might well be faster.
| | 01:53 | And for some visitors, the boring old-
fashioned approach could be the only way
| | 01:56 | they can work with your site.
| | Collapse this transcript |
| Laying out your page for media| 00:00 | If you think that people will want to
immediately watch or listen to the media
| | 00:03 | you provide, it makes most
sense to embed it in the page.
| | 00:06 | If you think they are going to want
to download it for use later on, for
| | 00:10 | instance, as a podcast, then you
should provide it as a link on your site.
| | 00:14 | Each downloadable piece of
content should have its own page.
| | 00:17 | When you create a link on
your site, you link to that page.
| | 00:20 | The page should have a summary of what
the downloadable content is about, the
| | 00:23 | formats it's offered in, and related
items like transcripts for video or other
| | 00:27 | podcasts in the same series.
| | 00:29 | The reason for giving each piece of
content its own page is that this gives
| | 00:32 | visitors a chance to check that they are
downloading the right thing before they
| | 00:36 | start rather than after they open it,
which might happen some time in the future
| | 00:39 | after they've left your site.
| | 00:41 | Also, having a page for each download
gives you a chance to provide a text
| | 00:44 | description of the media.
| | 00:46 | Because search engines can't work out
what's in the media items directly, this
| | 00:49 | text description provides a lot more
context, it means that your site will rank
| | 00:53 | higher in search results than other
similar sites that don't provide the same
| | 00:56 | level of description.
| | 00:57 | When you think that people will be
using the media from within your site,
| | 01:00 | display it along with your other
content, in the same way you would with any
| | 01:04 | other image or graphic.
| | 01:06 | It often makes sense to also provide a
link to the same media for download so
| | 01:09 | that people can easily
share it or use it offline.
| | 01:12 | If you're hosting on a service like
YouTube or Vimeo, embedding the video in
| | 01:16 | your site automatically creates a link
back to the video on the hosting site.
| | 01:19 | So, I think a separate link isn't necessary.
| | 01:21 | It may seem like more hassle to create
separate pages for each download, but
| | 01:25 | this will pay off in the future.
| | 01:26 | Search engines are notoriously bad at
being able to extract the meaning from videos,
| | 01:30 | podcasts, and sometimes even PDF files.
| | 01:31 | If you create summary pages for each
downloadable piece of content and have good
| | 01:35 | summary descriptions on those pages,
then you've made your site much more
| | 01:38 | accessible to search engines and
probably boosted the likelihood that people
| | 01:41 | will come to you for that information.
| | Collapse this transcript |
|
|
11. Balancing Adverts and ContentMaking money without selling out| 00:00 | If your site makes its money at least
in part from advertising revenue, you
| | 00:04 | probably struggle with the
balance of adwords and content.
| | 00:06 | From a user experience perspective,
there is a sliding scale of expectations
| | 00:10 | based on the site's brand.
| | 00:12 | Visitors have different expectations of
a high-end site, where profit from goods
| | 00:16 | sold is sufficient not to need ads, than
they do from free content sites like a
| | 00:20 | forum where ads pay for service space.
| | 00:22 | So, how far can you push it?
| | 00:24 | Well, we'll forget for a minute
that, that's the wrong question.
| | 00:27 | The answer lies in how
valuable and unique your content is.
| | 00:30 | The more valuable your content is and
the less likely it is that they can find
| | 00:34 | it elsewhere, the more you can pile
advertisements in front of your visitors.
| | 00:37 | The real question though
is why would you do that?
| | 00:40 | There are ways of creating a win-win
situation for you and your visitors.
| | 00:43 | The biggest consideration
is creating valuable content;
| | 00:46 | targeted, concise, timely, and up-to-
date information on topics that your
| | 00:51 | visitors care about is valuable.
| | 00:53 | Like we've said elsewhere, generic, long
-winded, hyped up and outdated content
| | 00:57 | will quickly turn people away.
| | 00:59 | Another consideration is how in
your face the ads on your site are.
| | 01:03 | It's true that there's a trade-off
between location and click-through rate.
| | 01:06 | The more prominent locations on
the page, are likely to get
| | 01:09 | better click-through.
| | 01:10 | But, that's also where you want to
put the important content on your pages.
| | 01:13 | Placing ads there will get you more
clicks but from fewer people, because more
| | 01:17 | visitors will be scared away by the
volume and placement of the adverts.
| | 01:21 | Instead, consider having consistent
places either at secondary locations within
| | 01:25 | the page or in the margin
where you always display ads.
| | 01:29 | That will help you to retain the key
areas of the page for quality content, but
| | 01:33 | still provide a balanced mix
of content and advertisements.
| | Collapse this transcript |
| Adding graphical ads| 00:00 | If you watch Eye Tracking Study output
for pages with adverts on them, you'll
| | 00:04 | find that people don't always
spend much time looking at the ads.
| | 00:08 | Additionally, even if their eyes rest on
the adverts they tend to ignore the content.
| | 00:11 | It's as if our brains, once they've seen
the ad, manage to censor it, so that it
| | 00:15 | doesn't register consciously. Obviously;
| | 00:18 | that's lead to a bit of an advertising
arms race let's some ads doing more and
| | 00:21 | more to try and grab your attention,
either by flashing and blinking or by
| | 00:25 | making outlandish statements, about
how much money you just won for being the
| | 00:28 | national 10,000th visitor, or by
using hooks, like the one weird trick
| | 00:33 | ads for everything from reducing your
waistline to saving on your mortgage and insurance.
| | 00:38 | Even sneakier is the sponsored content
style ad, which is formatted to be more
| | 00:42 | like a group of news articles.
| | 00:43 | The reason that these ads frustrate
your visitors is because they take them off
| | 00:48 | task, they have the impression of
being part of the site, and it's not until
| | 00:52 | people click through on them that
they realize they have been duped.
| | 00:55 | Nobody feels good about being duped and
the person they blame is you, the site
| | 00:58 | creator, rather than the ad provider.
| | 01:01 | And the thing is people still
manage to ignore most of these ads.
| | 01:04 | The ones they can't ignore just
frustrate them; that's the real danger.
| | 01:08 | If people get frustrated when they come
to your site, then it's going to reduce
| | 01:12 | the likelihood they'll
return, so what's the answer?
| | 01:14 | Well, rather than trying new tactics
takes to get people to look at the ads by
| | 01:18 | making them bigger, brighter,
flashier or more of a tease, just make sure
| | 01:22 | that they are relevant.
| | 01:23 | That means make sure that
advertisements are for goods that relate to the same
| | 01:26 | interests as the site content.
| | 01:28 | Sure, the relevant ads might not
be offering the same returns as the
| | 01:31 | generic flashy ads.
| | 01:32 | What you might find is that for
however much they lose in revenue per click,
| | 01:37 | they make up for a number of actual clicks.
| | 01:39 | Of course, this means that you need an
ad serving engine that allows you to do
| | 01:43 | very specific targeting, you might need
to experiment with a couple of different
| | 01:47 | services before you find
one that will meet your needs.
| | 01:49 | You might also need to specify ad
types not to show on your site, in order
| | 01:53 | keep things relevant.
| | 01:55 | When you give your visits as relevant
adverse, you're actually doing them a favor.
| | 01:58 | Most people now grudgingly understand
that they are getting free access to your
| | 02:02 | content and return for being shown adverts.
| | 02:04 | They are more likely to look favorably
on your site if the ad content at least
| | 02:08 | corresponds to the site's content.
| | Collapse this transcript |
| Creating text ads| 00:00 | With graphical advertisements, it's
normally pretty easy to identify the ad area
| | 00:04 | and understand that it's separate from
the rest of the site's contents, with
| | 00:07 | text-based advertisements that
distinction can often be much less obvious.
| | 00:11 | Font colors and links for your text ads
should be consistent with or different,
| | 00:16 | but complementary to the colors you
use for regular text on your site.
| | 00:19 | If you can, it makes sense to stick to
the default color scheme that those ads
| | 00:23 | have on sites like Google.
| | 00:25 | This consistency allows visitors to
your site to immediately see which areas of
| | 00:29 | the page are your content
and which are advertisements.
| | 00:32 | Try and place text adverts in a
consistent location separate from your key content.
| | 00:37 | Remember, it is not going to help much
if you camouflage the ad so much that
| | 00:41 | they look like regular content.
| | 00:43 | Sure, visitors may click on them once
or twice, but they'll soon learn that
| | 00:46 | finding real content on your site
is more trouble than it's worth.
| | 00:49 | If you want repeat business, it makes
most sense to ensure your text ads are
| | 00:53 | relevant and also easily identified as ads.
| | 00:55 | The worst thing is if visitors click
through on a text ad on your site and don't
| | 01:00 | even realize they've left your site.
| | 01:01 | Now, they're browsing on
someone else's site rather than yours.
| | 01:05 | I've seen this happen quite frequently
when people are focusing hard on their tasks.
| | 01:09 | So there are several reasons why it's
in your best interest to make a clear
| | 01:13 | distinction between your content
and the text adverts on the page.
| | Collapse this transcript |
|
|
12. Summary: Good Design PracticeSimple, consistent, and standard design| 00:00 | In this course, we've covered
everything from working out who your users are,
| | 00:04 | through to setting up a good navigation
structure and writing succinct content.
| | 00:08 | We've explained the user centered
reasons behind the design rules for pretty
| | 00:11 | much every part of your site.
| | 00:12 | It's a lot to take in and it might
take you a while to incorporate everything
| | 00:16 | we've covered into your site.
| | 00:17 | Good user experience design
boils down to three principles.
| | 00:21 | If you keep things simple, consistent,
and standard, you'll go along way towards
| | 00:25 | creating a great experience for your users.
| | 00:27 | When we talk about simple design, we
mean that you've made sure all of your
| | 00:32 | content is there for a reason and
that you use the minimum amount of text
| | 00:36 | necessary, short words,
short paragraphs, short pages.
| | 00:39 | It also means that graphical elements
and advertisements should be relevant and
| | 00:43 | not obtrusive, only using media and
interactive content when they add something
| | 00:46 | that you couldn't achieve a different way.
| | 00:49 | Making the site consistent means
ensuring your menus, controls, text labels,
| | 00:54 | headings, body text, navigation, and all
other design elements work the same way
| | 00:59 | throughout your site.
| | 01:00 | That way people quickly learn how
your site works and will be confident
| | 01:05 | navigating to new areas.
| | 01:06 | And standard design is aimed at making
sure your visitors can successfully apply
| | 01:10 | skills they have learned in other
places on the web when they visit your site.
| | 01:14 | Make sure that your site behaves
the same way as other sites out there.
| | 01:18 | This isn't copying;
| | 01:19 | it's being kind to your users.
| | 01:21 | The ways you differentiate your site
from everyone else's is by offering
| | 01:24 | something unique in your content,
not in the way your site is setup.
| | 01:28 | What's unique about your blog is
what you say and not how you present it.
| | 01:31 | What's unique about your portfolio is the
design inspiration, not the site layout.
| | 01:35 | Your ecommerce site structure can be the
same as everyone else's, as long as the
| | 01:39 | products you sell are awesome.
| | 01:41 | The structure of your Internet
should fade into the background, so the
| | 01:44 | information can be highlighted.
| | 01:46 | Simple design lets your visitors find the
information they're looking for quickly.
| | 01:50 | Consistent design means your
site's navigation is easy to remember.
| | 01:54 | And standard design makes
the interaction easy to learn.
| | 01:57 | By sticking to these three principles,
you give visitors the fastest and easiest
| | 02:01 | route to finding the
information they are looking for.
| | Collapse this transcript |
| Consider your users and you'll be fine| 00:00 | The most important message to take
away from this course is that without your
| | 00:04 | users, you have nothing.
| | 00:05 | For that reason, it's essential
that you build the whole site with your
| | 00:08 | users' experience in mind.
| | 00:10 | Every time you make a design decision,
ask, does this make the experience
| | 00:13 | better for my users?
| | 00:15 | You can apply what you've learned in
this course to help answer that question.
| | 00:18 | You can also consider watching real
users working with your site, a usability
| | 00:22 | study as a way of confirming
whether you are right or not.
| | 00:25 | It might feel like many of the
recommendations in this course are aimed at
| | 00:28 | getting people to leave your site as
soon as possible, making it easy for them
| | 00:32 | to find a piece of information and then move on.
| | 00:35 | You might be thinking, surely, it's
better to draw them in, so they spend as
| | 00:38 | much time there as possible,
especially if you are ad driven.
| | 00:41 | Well, no, what's better is to build
a reputation as a place that has the
| | 00:46 | information that people need.
| | 00:47 | Wikipedia is probably them
most stark example of this.
| | 00:50 | The site is formatted entirely to
optimize the flow of information from the
| | 00:54 | site into your brain.
| | 00:55 | It has been designed to be easy to
scan with many links to related content.
| | 01:00 | As a result, you trust the site
to be a good source of information.
| | 01:04 | You think of using it, because
you know you'll get a quick answer.
| | 01:07 | So you go about it more frequently
and also spend more time following
| | 01:10 | those related links.
| | 01:11 | So counterintuitively, by making it
easier to find the information on the site,
| | 01:15 | Wikipedia have made it more likely
that you'll spend more time there.
| | 01:18 | So by considering your users' experience
with your site, you'll make it much more
| | 01:22 | likely that they'll find what they need,
leave with a good feeling, recommend
| | 01:25 | your site to others, and come back to
use it again and again in the future.
| | 01:29 | In this course, we've given you an
introduction to user experience and usability.
| | 01:33 | Hopefully, now you're energized to
try out the things you've learned and
| | 01:37 | share them with others.
| | Collapse this transcript |
|
|
ConclusionMore resources| 00:00 | I hope you've enjoyed this course,
we've given you the tools you need to create a
| | 00:04 | great user experience on your website.
| | 00:05 | Hopefully, now you're energized to
try out the things you've learned and
| | 00:09 | share them with others.
| | 00:10 | We've put together a list of resources
to help you learn more about the topic.
| | 00:13 | useit.com is Jakob Nielsen's site.
| | 00:16 | He is one of the leading
thinkers in the usability space.
| | 00:18 | He publishes a new article every two
weeks and you can read them online or
| | 00:22 | subscribe to his mailing list.
| | 00:23 | uxmatters and boxesandarrows are both
sites that publish longer form articles
| | 00:28 | about user experience.
| | 00:30 | They both have a rich archive of information
and contributions from experts in the field.
| | 00:34 | The Usability Professionals'
Association is the industry organization and they
| | 00:38 | have links to lots of resources and
also to local chapters that you can join to
| | 00:43 | meet other people who are
interested in the user experience.
| | 00:46 | And I couldn't finish
without mentioning my site;
| | 00:48 | questionablemethods.com is a place
where you will find ways to do quick, cheap,
| | 00:52 | usability testing, to
help you perfect your site.
| | 00:54 | And if you do nothing else, I suggest
you go out and usability test your site.
| | 00:58 | Take a roll of duct tape and a pad and
pencil and go out to where people work
| | 01:02 | with your webpages.
| | 01:03 | The duct tape is to go over your mouth,
so you aren't tempted to interrupt.
| | 01:07 | The pad and pencil are to take notes
of everything your participants do and
| | 01:10 | everything they say while
they are doing their tasks.
| | 01:13 | You'll learn so much from watching
just five people, that you will have enough
| | 01:17 | design changes to keep you busy for weeks.
| | 01:19 | It's a humbling and very satisfying
experience and a great way of rounding out
| | 01:22 | the lessons from this course.
| | 01:23 | So, I hope you've had fun
learning about user experience.
| | 01:26 | Now, it's time to take what you've
learned and apply it to the websites that
| | 01:30 | you create.
| | Collapse this transcript |
|
|
