Make the page elements obvious using patterns and alignment

Good design uses creativity to develop usable web pages. On a usable web page, each of the various elements of the page (logo and name, search, global navigation, local navigation, content, ads, and so on) are instantly obvious, allowing people to select what they want effectively and efficiently.

Two critical aspects of making page elements obvious are patterns and alignment.

People are very pattern-oriented. If the Search box is in the upper right on the home page, we expect to see it in that place on all the pages. If bulleted lists are slightly indented on the first few pages we look at, we expect all bulleted lists to be indented in the same way. We are faster at understanding how the page is designed and at finding the specific part we need if the patterns are obvious and consistent across pages.

One of the most effective ways to create patterns that people quickly see and learn is to have only a few places across the page where boxes or text start. When people complain that a site is "cluttered" or "too busy" or "hard to use," they are often reacting to pages where elements are not aligned well.

Figures 7-1 through 7-4 show two very different types of sites with obvious patterns and alignment. Figures 7-1 and 7-2 are from the web site of the investment company JPMorgan Chase.

Figures 7-3 and 7-4 are from the web site of the New York Metropolitan Opera. The designs are different, but each is consistent within itself, with clear patterns and alignment.

The company name is in the f ^J upper left, as people expect. The top band color remains consistent across the site.

/^S Global navigation is at ' ^J the top. The Search box is at the upper right.

consistent across the site.

Black text on a white background signals the main information part of the page.

Figure 7-1 The elements of this web page are immediately obvious. The page has a clean, somewhat formal look, in keeping with the image that an investment company wants to portray. www.jpmorganchase.com

Black text on a white background signals the main information part of the page.

Figure 7-1 The elements of this web page are immediately obvious. The page has a clean, somewhat formal look, in keeping with the image that an investment company wants to portray. www.jpmorganchase.com

Ham* Onfl ^

a»»

'SS

Figure 7-2 The design is consistent across these pages. The color changes to indicate which of the main areas you are in. The photo changes to match the topic of the page. (I added the light gray overlay and the dotted lines to make the alignment more obvious to you.)

The global navigation does not \ * * J start at the same place as the S^y page title and text. This may have been a deliberate design decision to differentiate the global navigation as a distinct page element.

i in-Fi r .- hiTtar, and îulttjia I ths pnncipta of K-ervjng ta imcro. a rf • carnnuwci w* jar. a. In JCD5. JPMwpm C?idîE

I • provtdtd H Wwn m csmrtiunir,-da. «ldb«naflC landm j and imtKtng for houimo and teoflonw JataltHMiiam In low- and modafatt-iftconM «Mnmuntiei contributed fltiriv ». i ? la Bwuundt ol nofrftr^mAi :'4*£r:rxiM

bam ih* Ifiin hen and defrtdnmraiad autv to linnaj done

4 -. » (gcnc^llttnii. a an. insnmantal pOUCV IDohH high «>ndartf » JUi Ç'-ï» butintu

*nMOkh m Connartad ta<is of tnousands "I mp '.>:>" arth -.clunlaar opporcmities the* coflvnuiKoei.

TtWfottoiwiO CipatLLïm tvbwit oi* intarMon *ith COPnmunitiH and «Kti othar ami Quid* ouf afloitl to'tv* a la spons.bia toirarata atizer :

Figure 7-2 The design is consistent across these pages. The color changes to indicate which of the main areas you are in. The photo changes to match the topic of the page. (I added the light gray overlay and the dotted lines to make the alignment more obvious to you.)

Here the site name

with the global navigation occupies space by itself

The Metropolitan Opera across the top under the THISWEEK SEASONS TICKETS mTCHflUSTEN NEW5 A FEATURES SUPPOJTTTHE MET ABOUT THE MET site name.

The page title is in a shaded bar.

Local navigation is on the left.

What I Do: The ChoreoJogist

HECSrt AHT1CIE5

/^S The article - text, photos, f ^J even musical scores -line up in a clear column on the right.

Ttit tubliC 11 Vhilfy IHt IIUI lh*ri M flfl Ihl t*.l Snritl .( iht ifiçriclçj.p fcr Minghtrj I

poductnn dPuccwri Midinf t-lâ^t Orne pscpi* he* lhn mu i y.njn i at dwv l*v 01» ,«»* m *ln*yi vmrttf*« ho* UK* « (■ lhii

Ttit tubliC 11 Vhilfy IHt IIUI lh*ri M flfl Ihl t*.l Snritl .( iht ifiçriclçj.p fcr Minghtrj I

poductnn dPuccwri Midinf t-lâ^t Orne pscpi* he* lhn mu i y.njn i at dwv l*v 01» ,«»* m *ln*yi vmrttf*« ho* UK* « (■ lhii

Figure 7-3 The web site of an opera company has a different design from that of an investment company - but is visually very pleasing, with clear patterns and alignment. www.metoperafamily.org/metopera

0 0

Post a comment