Wiley 978-1-1199-9298-1 Datasheet

Brand: Wiley

Model: 978-1-1199-9298-1

Category: Software manuals

Type: Datasheet

05_9781119992981-ch01.indd 205_9781119992981-ch01.indd 2 5/13/11 2:12 PM5/13/11 2:12 PM

COPYRIGHTED MATERIAL

The Distinction

of Web Design

Principles and variables of a visually appealing

layout

05_9781119992981-ch01.indd 305_9781119992981-ch01.indd 3 5/13/11 2:12 PM5/13/11 2:12 PM

DISTINCTIVE DESIGN

CREATING THE IDEAL, aesthetically pleasing, distinctive design seems like an impos-

sible task to many. While most web industry  elds have their own methodology to

improve and yield results in the layout and the structure of the content, a few basic de n-

ing concepts underpin the whole process of forging beautiful designs. Essentially, the goal

is to achieve maximum impact on users.

Within this  rst chapter, I highlight the justi cations for creating a distinctive design, the

variables a ecting the end users, and the importance of visibility. In addition, I provide a

solid introduction to critical basic design concepts, including neutrality or balance. I also

explain how to emphasize the right content, how to prioritize and analyze content in

order to clean up an interface (using tools like minimalism), and how to avoid con ict and

inconsistencies with websites.

Taking You Back to Basics

Within the realm of user experience, complexity has become the enemy of the people.

Often at the most basic level, the need to create more intrinsically dynamic and func-

tional designs causes website visitation (and the users who browse those sites) to su er.

Although the concept of “designing with purpose” is nothing new, how people read and

recognize objects, and how much attention people give to some components within a lay-

out compared to others, can be summed up in the four words shown in Figure 1-1.

Figure -: Each and every element asks, “Can you see me?”

Treating the elements of your website like a living, breathing entity may seem rather silly

at  rst, but the visualization it produces accurately re ects the situation. Just picture

05_9781119992981-ch01.indd 405_9781119992981-ch01.indd 4 5/13/11 2:12 PM5/13/11 2:12 PM

CHAPTER ONE THE DISTINCTION OF WEB DESIGN

each part of your site as someone within a crowd.  e loudest individuals are shouting

above everyone else.  is clashing certainly results in quieter voices going unnoticed,

even if that voice is important within the project’s context.

Gauging every object’s importance against the level of noise and distraction elsewhere on

the page is central to assigning a level of purposeful distinction to your pages. Your users

have a limited attention span, and by ensuring that the objects on the page have a well-

balanced proportion of importance versus voice, you create a distinctive—and visible—

design that people can enjoy and browse without constraint.

Tip

To learn more about the average Internet user’s attention span (or lack thereof),

check out this article by usability specialist Jakob Nielsen: www.useit.com/

alertbox/timeframes.html

If something is visibly useful to a page, assign more attention to it (see Figure 1-2). Less

important items on a page require less attention. You have little time to impress visitors

before they hit the Back button or look elsewhere.  e exact amount of time is up for debate,

ranging from zero points of a second, as people subconsciously pre-judge what they see, to

 ve or ten seconds. Web professionals often forget that selective emphasis holds importance!

Figure -: A stylistic ﬂ ourish within a page often depicts emphasis and strength.

 e balancing act can be quite tricky. You should analyze and self-critique your methods

as well as ask others to give feedback. Even negative feedback is helpful; actually, in many

cases, it’s more helpful than positive feedback.  e justi cation for many design choices

rests upon those four essential words (refer to Figure 1-1); by wielding such control over

a page, you ensure users  nd what they want (or need) at the point they require it.

05_9781119992981-ch01.indd 505_9781119992981-ch01.indd 5 5/13/11 2:12 PM5/13/11 2:12 PM

DISTINCTIVE DESIGN

Time, space, and relativity

Understanding the needs of your content is central to the concept of distinctive design,

but the user experience demands more than simple information visibility. Although an

inanimate object, your content has a few primary needs that must be accounted for in the

overall layout, such as visibility and accessibility. Many variables can a ect the duration

and extent of a visitor’s experience, and while some of these are more imposing than oth-

ers, such as pesky browser bugs and page availability, some can be tied into human per-

ceptions and the amount of resources or self-sacri ce web professionals choose to assign

to a service.

Time, space, relativity, and other variables speak volumes to the  nite resources humans

often temporarily assign to a site for the duration of their stay. Each variable ties deeply

into the other because they are often measured upon the perception of whether the e ort

exerted by visitors matches the importance level of other events going on around them.

Check out this list of  nite resources:

> Time:  ere’s only 24 hours in a day, and users rarely spend all of those browsing a

single site. How much of this precious resource a visitor uses on your site depends

on the value of the content.

> Space:  e freedom to browse a site without inhibition is important to the overall

user experience. If users feel restricted or forced into jumping through unnecessary

hoops, they may exit!

> Relativity:  e relationship between content and sites is important to the web. If a

site’s content connects to a concept or subject introduced by another site, it may

gain added attention.

> Money: Services with de ned costs have to work even harder than free or ad-

supported sites for attention. Since the content is provided behind a “paywall”,

money is needed to gain visibility.

Important

Remember that feedback is quite subjective (and should be taken with a grain of

salt). Don’t implement changes that users request on a whim without a good

reason. Some things can actually make a design worse, and the last thing you

want to do is destroy all your hard work!

05_9781119992981-ch01.indd 605_9781119992981-ch01.indd 6 5/13/11 2:12 PM5/13/11 2:12 PM

CHAPTER ONE THE DISTINCTION OF WEB DESIGN

> Patience:  e average visitor feels a great variety of emotions when browsing a site

(some of which you can manipulate). If barriers to entry are high, the willingness to

continue may be lost.

> Attention: Objects on a page are always vying for a user’s focus, and in polar oppo-

sition, users are themselves trying to get the attention they require from objects.

 is must be accounted for.

> Loyalty: By providing good experiences and reducing the levels of background

noise, users are more likely to return to our sites.

> Trust: Use of a site is based on the value of its content and how reliable users deem

its source. If your content is full of lies or inaccuracies, the content’s value is

lowered.

> Energy: Users are expected to undertake so many activities within a page. Clicking,

typing, and perhaps even more! Tiredness can work as an inhibitor when browsing

the web. Don’t make users exert themselves.

 ese end-user functions (rather than controls of an interface) are subjective to every

individual, but this doesn’t mean that they can’t be accounted for or measured. Don’t

assume, for example, that visitors can (or want) to spend hours looking over a 5,000-page

site  lled with content. (Admit it: You’d lose your sanity if you had to scroll through them,

so why would you torture someone else with such a process?)  e balance between dis-

tinction and the variables mentioned earlier is important to get right; the two relate quite

heavily to each other.

Tip

Making a website fun and engaging is among the best methods of distorting the

time ﬁ eld of an end-user. People regularly waste endless hours playing games on

the web, and if you are a creative individual, you can provide that sort of

experience (and functionality) on your own site!

Albert Einstein once said, “Put your hand on a hot stove for a minute, and it seems like

an hour. Sit with a pretty girl for an hour, and it seems like a minute. THAT’S relativity”.

Einstein’s quote is a perfect reminder that a user’s experience should not be painful or

unendurable to the point of feeling abandoned. A visitor shouldn’t feel useless in her

quest for information. More importantly, it also shows that you can manipulate the

05_9781119992981-ch01.indd 705_9781119992981-ch01.indd 7 5/13/11 2:12 PM5/13/11 2:12 PM

DISTINCTIVE DESIGN

variables that people use to measure your work’s value (such as time and trust) and

a ect the impact upon a user (see Figure 1-3 for an example).

Figure -: Straightforward forms are much less time-intensive than complex documents.

Distinctive design in uences the time it takes to locate important details within a page. It

also sets the tone for how tedious or enjoyable  nding that information is (and by asso-

ciation causes relativity to take e ect). Understanding the connection between the actual

amount of time visitors devote to your site and the perception of time they devote to your

site provides you a rare opportunity to stand out, which, in turn, gives visitors the desire

to return.

Consider the amount of time you spend playing a game in comparison to undertaking a

job you don’t  nd particularly enjoyable. As you spend time doing something you enjoy,

the focus you place on time spent is reduced, much like the famous saying “time  ies

when you’re having fun.”  e “time  ies” ideology (known as “Tempus Fugit”) is a classic

example of how variables can be manipulated to encourage continued use.

Information must be visible within the con nements of the page it’s held in, or else the

distinctive focus that may be drawn simply cannot exist. If you create a page that includes

content or features with low visibility, (like creating elements that inadvertently mini-

mize other elements’ importance or you intentionally apply a negative emphasis to cer-

tain content or features), the content lacking visibility inherently diminishes in

importance in the end-user’s experience and could result in users missing the message.

05_9781119992981-ch01.indd 805_9781119992981-ch01.indd 8 5/13/11 2:12 PM5/13/11 2:12 PM

CHAPTER ONE THE DISTINCTION OF WEB DESIGN

Deﬁ ning the ideal perspective

Of the variables and principles that impact your capability to serve visitors e ectively, the

most common failures occur as a result of either obtrusive subjectivity (doing what you

think is best for the end-user rather than what actually may be the case) or a lack of atten-

tion to detail. Appealing to the widest possible audience is critical to underpinning a dis-

tinctive design.  e concept of a best-case scenario puts forth the idea that if you aim to

design in ways that will generally apply to all users, you reduce the chance of confusion.

Distinction isn’t about just standing out. It’s also about aesthetics and providing a visual

appeal to match the visitor’s plentiful expectations!

Note

Many people (excluding seasoned web professionals) confuse professionalism

with the visuals or aesthetic a website provides. The public associates quality

products with quality layouts! Unfortunately, spammers and scammers regularly

exploit this assumption by creating slick designs.

A beautiful website engages more visitors, and an unattractive website gives o the

impression of unprofessionalism, making users turn away as a result. Distinctive design

showcases and attempts to re ect the need for a balance between beauty, usability, and

awareness within the pages’ unique layout.  e immediate beauty of a page (just like

human attraction) is great for the short term, but substance over style and the attributes

that make your site great and unique are critical to a long and happy visitor relationship.

 is may seem worrisome to some people, who may feel that trying to make something

beautiful, unique, distinctive, and usable—all in one package—is close to impossible. It’s

actually easier to make a beautiful website once you know how (Figure 1-4 gives us a quick

three-step process). If you build a website that is usable, the content’s identity will be visi-

ble to those who read your copy. If your content portrays your site with depth and rich-

ness, viewers can identify with these characteristics. And if your site is distinctive, the

uniqueness and aesthetic identity can be formed around it. Like with most things in life,

it’s a case of everything in moderation!

Granted, this is a best-case scenario, and there may be times when you may think that no

perfect solution exists (perhaps one good solution has not yet been innovated), but you

can compromise those ideals to a certain extent, as long as the  nal e ect nets you the

intended response. Perfection isn’t possible in design (several factors cause a lack of con-

trol over the rendering canvas), but that doesn’t mean you can’t keep improving things to

re ect the experience as optimally as possible (even though the web isn’t print).

05_9781119992981-ch01.indd 905_9781119992981-ch01.indd 9 5/13/11 2:12 PM5/13/11 2:12 PM

DISTINCTIVE DESIGN

Figure -: Building a distinctive and beautiful website is simpler than it may appear.

Designing with Neutrality

Beyond the variables I have previously mentioned relating to distinctive design and the

idealistic intentions they naturally seem to evoke in giving your visitors everything (with

as few consequences as possible!), the principles of how distinction is formed relate to a

range of certain design concepts that exist not only within the context of the web, but

also within the scope of print design. Of course, digital media and traditional print are

quite di erent in their capabilities and limitations, but some useful lessons can be drawn

from the study of concepts that branch both disciplines.

One of the biggest variables that in uence distinctive design (and the print world alike) is

the concept of neutrality (and the Zen-like state it produces). As you’re still balancing within

the realms of theory rather than practice, it may seem surprising that neutralizing visible

elements of the page (and making them less visible or attention-seeking) plays a part in

achieving distinction. But if you think about it, without balance, chaos reigns supreme!

 inking of your website in a Zen-like format helps you understand that to ensure a clear

and enlightened perception (both in giving accurate knowledge and being easy to follow)

you need to self-re ect upon the issue at hand. As a designer, you need to analyze the

choices you make for the bene t of your visitors, and you also need to provide a clear

method of showcasing wisdom through careful planning and resourcefulness.

 e principles of a Zen-like design are:

> Keep the components of your site’s visibility in balance.

> Consider your options wisely before you apply them.

05_9781119992981-ch01.indd 1005_9781119992981-ch01.indd 10 5/13/11 2:12 PM5/13/11 2:12 PM

CHAPTER ONE THE DISTINCTION OF WEB DESIGN

> Keep your visitors enlightened (o er them knowledge).

> Maintain clarity and reduce noise pollution.

Implementing the Zen concept within distinctive design and following the ideals of a neu-

tral interface is relatively straightforward. Designs composed of well-balanced content (in

which the required distinctive features take precedence over less useful information)

allow you to draw focus to the parts of a page that require attention. Reducing noise pol-

lution on a page and giving that balance where it’s required keeps distinctive content—

well—distinctive and lets the rest be calm, silent material that remains on the page but is

noticed only as further page inspections occur.

Beautiful balance

Taking the concept of Zen neutrality beyond what was previously mentioned, a design that is

clear in its separation of distinctive design elements from additional  ourishes or extended

attributes, gives your design added stability.  e elements of your website are weighted (much

like those in Figure 1-5) with distinctive elements holding more natural weight and value on

one side and the other content balanced on the other. If the level of distinction either equals

or extends beyond the neutral (less unique) content, the power of its in uence lessens.

Figure -: Although the balance may be oﬀ set, the need to complement such elements remains critical.

When looking at existing layouts, an unnatural balance must exist between a design and

the emphasis (unique components) within a page. And just like Earth, if something is

thrown seriously out of whack, it seems to naturally correct itself by reducing the strength

of emphasis in which attention-seeking content retains. On a page with paragraphs of

text and a single heading, that heading’s distinctive nature stands away from the page

05_9781119992981-ch01.indd 1105_9781119992981-ch01.indd 11 5/13/11 2:12 PM5/13/11 2:12 PM

DISTINCTIVE DESIGN

(yet, if the page includes several headings, none stands out).  is is due to how humans

are naturally attracted to uncommon sights. Gaining a user’s eye requires a clever mix of

eye candy and o setting the layouts equilibrium.

If all of your content has little to no emphasis (such as just paragraphs of text), the read-

ability of that content is diluted to a neutral level. Yet, if you have too much emphasis

(such as stu ng everything into headings like in Figure 1-6), the strength you intend to

attain dilutes itself! Only when the critical mass is reached will emphasis and strength

sustain itself.

Figure -: If you place emphasis everywhere, nothing stands out.

Before leaving the concept of balance (for the moment), it’s important to highlight the

value of eliminating or repositioning balance whenever possible.  e key to gaining a visi-

tor’s attention is to provide distinctive content, but neutrality is the direct opposite of

this.  e trick to good design is to provide as much distinction as you can, without push-

ing it too far (and diluting the e ect).

You can apply distinction in many ways, including use of color, whitespace, and more!

What this means is that if you’re smart enough to apply emphasis equally through various

means, rather than on one aesthetic point, you make your content distinctive without

risking the issue of over-dilution. Generally, dilution only occurs visually with a lack of

context within its implementation, not just as a result of an abundance of balanced

objects.

05_9781119992981-ch01.indd 1205_9781119992981-ch01.indd 12 5/13/11 2:12 PM5/13/11 2:12 PM

CHAPTER ONE THE DISTINCTION OF WEB DESIGN

Emphasizing the essentials

If you’ve been coding with HTML for a while or have any experience with producing web-

sites, you should already know that certain HTML elements provided within the W3C

speci cations, such as strong and em, provide visual emphasis not just on the screen

within the browser window (with default styles that can be overwritten) but in context

within the content itself.

Tip

For those without coding experience, HTML stands for Hypertext Markup

Language. It is the primary language web designers use to structure content

within a page. Think of it as the candy wrapper that holds the goodness in pretty,

identiﬁ able containers (if they are labeled correctly)!

Taking the principle of emphasis beyond the context and restraints of the HTML lan-

guage, providing a  ourish or distinctive marker helps users recognize a point of impor-

tance. You can emphasize a particular element in a number of ways, as long as it stands

out from its surroundings. Because emphasis remains at its strongest when it stands with

fewer competitors for attention, give only essential content this critical boost in visibility.

Used sparingly and appropriately, emphasis can draw attention quite quickly.

Some methods of providing distinction are quite direct and in-your-face; other methods

can be quite subtle. While subtle methods take longer to be recognized, it’s quite likely

that they are more reliable.  e proliferation of advertising that  ghts for people’s atten-

tion illustrates this theory, because people tend to develop a level of “immunity” to pat-

terns they recognize as negative (users automatically mentally block out blatant

advertisements). See Figure 1-7.

Figure -: An advertisement like this won’t hold your attention if you know it’s trying to sell something.

05_9781119992981-ch01.indd 1305_9781119992981-ch01.indd 13 5/13/11 2:12 PM5/13/11 2:12 PM

DISTINCTIVE DESIGN

One of the principles maintained through this book is that content must be emphasized

tastefully, with serious consideration about how your visitors may be a ected by the

increased level of awareness to one item (against the lessened awareness of other con-

tent). Remember that balance a ects your content and the value it inherits. Your goal is

to ensure that viewers regard the obvious material on a page as useful, not as a blatant

spam attempt.

Important

Opinions may vary on the extent you can emphasize content, but it’s

recommended that unless you know what you’re doing, avoid forced actions

such as pop-up windows, protection scripts (like anti-right-clickers), and the

ever-annoying automatic music-playing jukeboxes.

Negotiating neutrality

When you remove emphasis from a page, what remains will increase in strength. Using

neutrality e ectively is an inspired concept, isn’t it? In many ways it’s like a talent con-

test. When fewer people enter, it’s much easier to identify the most talented individuals,

but as the numbers increase designers rely more on comparison and elimination (perhaps

unjustly) to give ourselves the best chance of  nding the stars amongst the masses.

Focusing on what’s on the page and what already has emphasis is easy (because attention

grabbing is what it intends to do). But the capability to disinherit and demote enhance-

ments and  ourishes (while involving some di cult choices) can both reduce the level of

noise that exists within an interface and bring some stability to the page (Figure 1-8 high-

lights how attention is spread).  e more neutrality you assign, the more direct the e ects

are upon content that retains its status and levels of importance.

If you already have a website, strip away all of the excess, both graphically and contextu-

ally (from existing emphasis). Once your content sits on an unstyled and visibly similar

page, it becomes easier to see when you have an excess of information, thereby making

your distinctive content harder for the reader to identify.  is action could encourage you

to apply emphasis more intelligently or with greater constraint. By doing this you decon-

struct the aesthetic using reductionism (a principle examined later in this chapter).

Important

Whenever you change your source code (or critical ﬁ les like images), make a

backup or use a version control system just in case you need to return to the

older edition later! It’s common sense to safeguard your work, especially if

you’re making potentially dramatic changes to it.

05_9781119992981-ch01.indd 1405_9781119992981-ch01.indd 14 5/13/11 2:12 PM5/13/11 2:12 PM

CHAPTER ONE THE DISTINCTION OF WEB DESIGN

Figure -: Balancing a page using less-emphasized content (of various types) redirects attention.

So far, you have seen the bene ts of becoming Zen-like in your design approach by

redrawing the balance when you feel it can improve the way information is conveyed, and

by balancing neutrality and emphasis, which re ects the opposing sides of attention-

focusing. In the next section, I go over the more straightforward principle of simplicity. It

is one of the most primal methodological forces for improving the distinction of what

remains visible on-screen (and without it, things would get very cluttered indeed).

The Sum of All Parts

Holding your visitor’s attention with plenty of active elements on a page can be di cult.

Because distractions on a page can reduce the visibility of key information, it’s important

to preserve the integrity of the emphasized content that already exists. If adding empha-

sis to such content seems like the only answer to your problems, never fear; there is a less

popular but equally powerful way to give a cluster of content emphasis.  at method is to

take away any unnecessary clutter from the website’s foreground and background (think

of it as spring cleaning for your visitor’s bene t).

Note

For every element, property, and function, keep asking if what’s sitting within

your pages is really necessary. If you can’t justify it, remove it entirely! Or if you

need to include it on the page, you can progressively disclose it as required

(making it visible only when it’s needed onscreen).

05_9781119992981-ch01.indd 1505_9781119992981-ch01.indd 15 5/13/11 2:12 PM5/13/11 2:12 PM

DISTINCTIVE DESIGN

With increasing techniques to provide content on demand, the capability to perform such

a function has become more widespread and popular. A website is essentially the compo-

sition of its many parts joining together in harmony. Distinctive designers need to reduce

information overload and simplify the overall experience. Luckily for us, the web is evolv-

ing rapidly in ways that are helping you to achieve the design goals you set ourselves.

Perhaps because of its implications in search engine optimization or the assumption that

more is better, removing emphasis (thereby stating some content is less important) or

objects from the page can be quite a scary prospect. Simplifying the interface and maxi-

mizing the use of the space is critical to reduce unnecessary content removal. Instead of

purging the material entirely, you can hide the content until necessary.

Methods that give content on demand a fresh appeal include:

> CSS3 selectors (like target or checked)

> JavaScript and JS libraries (like jQuery)

> AJAX (which has wide browser support)

An interface with fewer components inherently has fewer elements  ghting for space and

visual recognition. Such an interface also encourages visitors to read the full page rather

than scan it. Don’t be afraid to use some of the e ective tools in the modern designer’s

toolkit—simplifying the interface, reducing content (or emphasizing the content’s value

in more e cient ways), clearing out any unhelpful or boring content, and heuristically

assigning value (thereby temporarily hiding less valuable assets).

Tip

For those without coding experience, CSS stands for Cascading Style Sheets

and represents the visual style. JavaScript is used to control behavior-based

events, and AJAX is a method of processing data between a user and the host’s

machine. All three can help you avoid page refreshes and provide a seamless,

content-packed experience!

Beautiful emptiness

Picture an empty website void of content, graphics, color, and every other asset of emphasis

and distinction you can include.  is emptiness may seem boring, but it actually showcases

one of the most primal and fundamental aspects of design. Emptiness and space can be

beautiful (see Figure 1-9 for a lovely example of how an empty space could appear). Such a

visual representation is the epiphany of balance and a Zen state of being. If anything were to

be added to it, the distinction would be at its strongest.

05_9781119992981-ch01.indd 1605_9781119992981-ch01.indd 16 5/13/11 2:12 PM5/13/11 2:12 PM

CHAPTER ONE THE DISTINCTION OF WEB DESIGN

Figure -:  is is one of the cleanest environments known to man . . . a blank website.

Obviously, as a web designer, you are required to include content or items of interest for the

visitor, and this coincidently means the addition of material to your once derelict yet simpli-

 ed blank page. Clean can be very beautiful, but context and richness have more value! One

beautiful example of simplicity in e ect is the www.madebysofa.com site, which shows

that combining quality content with a basic layout can still be rich in distinction.

Individuals building a website from the ground up, in which nothing is set in stone, should

take time to examine not only what options are available to provide emphasis where it’s

needed, but also to refrain from applying stylistic, graphical, structural, or behavioral

emphasis and distinction within the web page unless absolutely sure. If you can get away

with simpler, it may work to your users’ bene t.

Individuals adapting an existing site to make it more distinctive (and perhaps more valu-

able to the visitor) should consider reformatting all of the content back to a neutral state

like plain text. Otherwise, you can simply examine the various individual components of

your site and decide on individual changes as needed.

How you choose to transform the emptiness or existing construction into an elegant and

optimized environment is up to you. (Figure 1-10 shows a basic example of how a more

technical interface can be simpli ed.) What is great about distinctive design is that you

can implement it progressively over a period of time, or you can use it as a basis for a

design built from the ground up.  e result of your work will be an interface that bene ts

more users.

05_9781119992981-ch01.indd 1705_9781119992981-ch01.indd 17 5/13/11 2:12 PM5/13/11 2:12 PM

DISTINCTIVE DESIGN

Figure -: Progressively enhancing or gracefully degrading, both are great design philosophies.

Sanitizing the interface

Four primary methods accurately depict how to remove content that is otherwise deemed

unnecessary from an interface in order to better portray the content that already exists.

Although each tends to come with a varying set of de nitions (as everyone seems to

havea di erent interpretation of its meaning), they all play an essential role in design.

Figure 1-11 identi es the bond each has to the design process.

Figure -:  e four cornerstones of distinctive cleaning. If it isn’t needed, it should disappear!

Simplicity

Simplicity is one of the most fundamental aspects of a clean and e cient user experi-

ence.  e acronyms KISS (“Keep it simple, stupid!”) and YAGNI (“You ain’t gonna need

it”) explain this principle in a highly direct method. Making things overly complex irri-

tates users, and unless you genuinely need a function or a visual representation in the

05_9781119992981-ch01.indd 1805_9781119992981-ch01.indd 18 5/13/11 2:12 PM5/13/11 2:12 PM

CHAPTER ONE THE DISTINCTION OF WEB DESIGN

interface, don’t add it. If there is a way to achieve something on the page with fewer

objects, elements or visual points of interest, it’s worth doing, as the likelihood for dis-

traction will be minimized.

Minimalism

Minimalism is a method that encourages simplicity by preventing the enhancement of ele-

ments until it is required. It is about taking something of existing complexity (like an

existing site) and stripping away every element that doesn’t need to be complex.  is con-

cept aims to deconstruct and improve the site with fewer or an equal number of features

of the same complexity level. With simplicity, you aim to strip existing objects down into

their core components. In minimalism, you start with only what’s necessary and build

upon that (when improvement is demanded).

Reductionism

Reductionism follows a more scienti c process than the previous two; it is the idea that if

something complex is taken and reduced to its most fundamental parts, you can better

understand its nature. Within the scope of distinctive design, you  nd that if you investi-

gate how particular parts of a site function, you can determine where emphasis may occur.

From there, you learn to improve the object. As an example, take the search engine results

page. Consider where your eyes are naturally drawn. Decide if that’s where you would like

your visitor to look or if it should be changed.

Holism

Finally, it’s worth noting the holistic approach, which acts in opposition to reductionist

theories (within design). Aristotle said that “the whole is more than the sum of its parts,”

and within the concept of design, this often holds true. Although you can reduce a site

down to a basic level to understand how things function, you need to visualize those parts

in context of the whole page. Never just assume that making a site simpler or smarter will

resolve every problem, because some issues result from outside in uences that are di -

cult to measure.  is e ect is magni ed on the web.

Tip

When assigning a level of importance to the components of your website,

separate text from images and other forms of media (providing their distinction

levels) because the level of emphasis a video and other input mediums (like

audio) endure are far greater than what text provides.

05_9781119992981-ch01.indd 1905_9781119992981-ch01.indd 19 5/13/11 2:13 PM5/13/11 2:13 PM

DISTINCTIVE DESIGN

Being Consistent is Critical

Consistency is an important aspect of a web interface. With regard to your visitors and audi-

ence, learning new things can be a particularly scary idea if they are forced to use trial and

error to  nd what they are looking for. One of the main reasons why most websites don’t

have a totally di erent look for every page is that visitors need to e ectively navigate around

a page without getting lost (imagine the learning curve if every page is visually di erent).

Visitors often scan a page to proactively seek what they are interested in (rather than

reading a page in full, as shown in Figure 1-12).  ey are more likely to use a mixture of

guesswork and quick responsive selections to  nd the closest match to their needs. If they

don’t  nd what they’re looking for, they’ll return to the original starting page to try again.

 ey are even more inclined to guesswork in an attempt to speed up the results. Although

this erratic style of behavior may seem impossible to assist, clearly de ned, well-labeled,

distinctive layouts work wonders.

Figure -: As your visitors scan for speciﬁ c keywords, their focus ignores what doesn’t associate.

If your visitors are fairly inexperienced with technology (as many Internet users are), they

probably depend on conventions or trends (recognizable objects on the page like naviga-

tion menus and clickable logos) to help them navigate around a site. Major changes

between designs or pages can therefore lead to widespread confusion. To quote Homer

Simpson, “In times of trouble you’ve got to go with what you know.”  at’s precisely what

users do. If they feel something is too hard or inconsistent (and you have competition),

they leave to  nd an easier source of information!

Important

Although it does not apply to everyone, the numbers of users who scan

information for relevance ﬁ rst and read second are in the vast majority. This may

be related to the reduced amount of free time people generally have (though

research with exact ﬁ gures is limited).

05_9781119992981-ch01.indd 2005_9781119992981-ch01.indd 20 5/13/11 2:13 PM5/13/11 2:13 PM

CHAPTER ONE THE DISTINCTION OF WEB DESIGN

Part of the justi cation for emphasis within a website is to lead your visitors by the hand

and guide them to the content that matters most to them. Titles within page sections aim

to give visitors an idea of where certain data is located; images and navigation menus help

visitors get to a resource they require; and even conventions like the underlined link

(asshown in Figure 1-13) helps visitors establish whether they need to click or continue

reading!

Figure -:  e default underlined link is often depicted by a selection of browser-induced trends.

Distinctively barrier-free

 e problem of inconsistent design forces website visitors to re-evaluate everything they

know about an interface, which isn’t helpful because you want to keep the process as

smooth and streamlined as possible, but punishing your users by accident can also be a

problem that many designers fail to account for. Overcomplicated visuals, dense or heavy

content, and invasive or abusive functionality disrupt the  ow and distinction.

One clear example of this problem in action is the issue of repetition. As users examine

the distinctive regions of your site in order to associate that location and content with a

speci c function (such as a navigation menu), confusion occurs if repetition exists in

another format. For example, many advertisers use these techniques to fool visitors into

thinking that their computers’ security may suddenly be at risk.

Arguably, using existing distinctive elements may yield results from individuals who

progress throughout a site without thinking, but the need for ethical practices in promot-

ing distinction takes precedence. If you produce a distinctive page element that misguides

the visitor, that user’s trust in your brand (and any other distinctive elements within the

site) may be permanently damaged, thereby turning the distinction into a negative.

05_9781119992981-ch01.indd 2105_9781119992981-ch01.indd 21 5/13/11 2:13 PM5/13/11 2:13 PM

Page is loading ...

Wiley 978-1-1199-9298-1 Datasheet

Brand: Wiley

Model: 978-1-1199-9298-1

Category: Software manuals

Type: Datasheet

Download PDF

report

Wiley 978-1-1199-9298-1 Datasheet

Wiley 978-1-1199-9298-1 Datasheet

Related papers

Other documents