Не заставляйте меня думать

Разработка веб-страниц для просмотра, а не для чтения

Если поль­зо­ва­те­ли Ин­тер­не­та про­хо­дят ми­мо ва­ше­го сай­та, сде­лайте пять важ­ных ша­гов, что­бы до­бить­ся его луч­ше­го по­ни­ма­ния:

 -Соз­дай­те яс­ную ви­зу­аль­ную ие­рар­хию на ка­ж­дой стра­ни­це 

-Ис­поль­зуй­те обы­чаи и ус­лов­но­сти 

-Раз­бей­те стра­ни­цы на чет­ко раз­де­лен­ные об­лас­ти 

-По­ка­жи­те яс­но то, по че­му мож­но щел­кать мы­шью 

-Умень­ши­те ви­зу­аль­ный шум

Соз­дай­те яс­ную ви­зу­аль­ную ие­рар­хиюна каждой стра­ни­це 

Луч­ший спо­соб сде­лать стра­ни­цу про­стой для бы­ст­ро­го схва­ты­ва­ния – это ор­гани­зо­вать внеш­ний вид эле­мен­тов стра­ни­цы (ви­зу­аль­ных под­ска­зок) та­ким об­разом, что­бы они яс­но и чет­ко по­ка­зы­ва­ли от­но­ше­ния ме­ж­ду эти­ми элементами –ка­кие эле­мен­ты свя­за­ны ме­ж­ду со­бой, ка­кие яв­ля­ют­ся час­тя­ми дру­гих эле­ментов. Дру­ги­ми сло­ва­ми, ка­ж­дая стра­ни­ца долж­на иметь яс­ную ви­зу­аль­ную иерар­хию сво­их эле­мен­тов. Стра­ни­цы с яс­ной ви­зу­аль­ной ие­рар­хи­ей об­лада­ют тре­мя чер­та­ми:

-Чем бо­лее ва­жен эле­мент, тем бо­лее он за­метен на стра­ни­це. На­при­мер, важ­ные за­го­ловки де­ла­ют­ся ли­бо круп­нее, ли­бо жир­нее, либо вы­де­ля­ют­ся цве­том, ли­бо от­де­ля­ют­ся большим пус­тым про­стран­ст­вом, ли­бо раз­ме­щают­ся бли­же к верх­ней час­ти стра­ни­цы, ли­бо ис­поль­зу­ет­ся це­лая ком­би­на­ция этих спосо­бов. 

-Эле­мен­ты, ло­ги­че­ски свя­зан­ные ме­ж­ду собой, долж­ны быть свя­за­ны и ви­зу­аль­но. На­при­мер, вы мо­же­те по­ка­зать, что какие-то эле­мен­ты рав­но­знач­ны, сгруп­пи­ровав их под од­ним за­го­лов­ком, ли­бо при­менив к ним оди­на­ко­вый стиль, ли­бо по­местив их в од­ну чет­ко от­де­лен­ную об­ласть стра­ни­цы.

-Эле­мен­ты пред­став­ля­ют­ся в ви­де вло­жений, ес­ли яв­ля­ют­ся час­тя­ми друг дру­га. На­при­мер, на­зва­ние раз­де­ла «Кни­ги по про­грам­ми­ро­ва­нию» бу­дет на­хо­дить­ся над за­го­лов­ком ка­кой-то кон­крет­ной кни­ги по этой те­ме, вклю­чая в се­бя все со­дер­жимое час­ти стра­ни­цы (эта кни­га яв­ля­ет­ся частью дан­но­го раз­де­ла). Под за­го­лов­ком этой кни­ги, в свою оче­редь, бу­дет вклю­че­ноее опи­са­ние.

Ко­неч­но, здесь нет ни­че­го но­во­го. В ка­ж­дой га­зе­те ис­поль­зу­ют­ся те же ме­то­ды вы­де­ле­ния, груп­пи­ро­ва­ния и ком­по­нов­ки со­дер­жа­ния, для то­го что­бы под­черкнуть еще до чте­ния наи­бо­лее важ­ную ин­фор­ма­цию по­ло­сы. Мы по­ни­ма­ем, что та фо­то­гра­фия от­но­сит­ся к той ста­тье, так как они объ­е­ди­не­ны тем за­го­ловком. А эта ста­тья яв­ля­ет­ся клю­че­вой («гвоз­дем») на стра­ни­це, по­сколь­ку она за­ни­ма­ет цен­траль­ное ме­сто, у нее са­мый боль­шой за­го­ло­вок и она на­бра­на широ­ки­ми ко­лон­ка­ми. Мы ка­ж­дый день стал­ки­ва­ем­ся с ви­зу­аль­ны­ми ие­рар­хия­ми – будь это на бу­маге или в Ин­тер­не­те. Но обыч­но они вос­при­ни­маются так бы­ст­ро, что мы да­же неус­пе­ва­ем это осоз­нать и на­чи­на­ем смут­но до­га­ды­вать­ся об их су­ще­ст­во­ва­нии, толь­ко ко­гда нам не уда­ет­ся про­вес­ти их бы­ст­рый ана­лиз, т. е. ко­гда ви­зу­альные под­сказ­ки (или их от­сут­ст­вие) вы­ну­ж­да­ют нас за­ду­мы­вать­ся. 

Хо­ро­шая ви­зу­аль­ная ие­рар­хия все­гда эко­но­мит на­ши уси­лия по на­чаль­но­му вос­при­ятию стра­ни­цы и по­мо­га­ет ор­га­ни­зо­вать и сис­те­ма­ти­зи­ро­вать со­дер­жание та­ким об­ра­зом, что­бы мы мог­ли поч­ти мгно­вен­но по­нять его в це­лом. Но ес­ли стра­ни­ца не име­ет яс­ной ви­зу­аль­ной ие­рар­хии – на­при­мер, ко­гда все выгля­дит оди­на­ко­во важ­ным, – это су­ще­ст­вен­но за­мед­ля­ет про­цесс про­смот­ра страни­цы на эта­пе вы­яв­ле­ния ин­те­ре­сую­щих слов и вы­ра­же­ний и вы­ну­ж­да­ет нас пытать­ся са­мо­стоя­тель­но фор­ми­ро­вать по­ни­ма­ние то­го, что же яв­ля­ет­ся глав­ным,а что вто­ро­сте­пен­ным. Ес­те­ст­вен­но, с на­шей сто­ро­ны это тре­бу­ет уси­лий. Кро­ме то­го, мы хо­те­ли бы по­лу­чать на сай­те не­кие ре­дак­тор­ские под­сказ­кии ори­ен­ти­ры от­но­си­тель­но то­го, что из со­дер­жа­ния сай­та яв­ля­ет­ся наи­бо­лее важ­ным и цен­ным или по­пу­ляр­ным, так же как ожи­да­ем это­го в дру­гих сред­ствах масс-ме­диа. По­че­му бы то­гда ре­дак­то­ру сай­та не рас­ста­вить эти ак­цен­ты для ме­ня, что­бы сэ­ко­но­мить мои си­лы и вре­мя?

Одо­ле­вать стра­ни­цу да­же со слег­ка на­ру­шенной ви­зу­аль­ной ие­рар­хи­ей – например под заго­лов­ком рас­по­ла­га­ют­ся эле­мен­ты, ко­то­рые к не­му не от­но­сят­ся, – так же не­удоб­но, как читать не­бреж­но по­стро­ен­ное пред­ло­же­ние (Билл на ми­ну­ту вы­пус­тил ко­тен­ка на стол по­то­му,что тот не­мно­го ша­тал­ся). Хо­тя мы обыч­но и мо­жем по­нять смысл предло­же­ния, но, пусть и на мгно­ве­ние, нам нуж­но за­ду­мать­ся там, где мы не долж­ны за­ду­мы­ваться во­об­ще. 

Обы­чаи и ус­лов­но­сти – ва­ши дру­зья

Ко­гда-то, еще в юно­сти, ка­ж­дый из нас учил­ся чи­тать га­зе­ту, чи­тать от­нюдь не сло­ва, а те ус­лов­но­сти, ко­то­рые в га­зе­тах ис­поль­зу­ют­ся. На­при­мер, мы уз­на­ли, что фра­за, на­бран­ная очень круп­ным шриф­том, – это,как правило, за­го­ло­вок, ко­то­рый обоб­ща­ет со­дер­жа­ние на­хо­дя­щей­ся под ним ста­тьи. Текст под фо­то­гра­фи­ей – это под­пись, в ко­то­рой да­ет­ся опи­са­ние или ком­мен­та­рий к ней, а ес­ли этот текст на­бран очень мел­ким шриф­том, то это имя фо­то­гра­фа. Мы так­же уз­на­ли, что раз­ные ус­лов­но­сти, ко­то­рые ис­поль­зу­ют­ся при вер­ст­кеи ма­ке­ти­ро­ва­нии стра­ниц, по­мо­га­ют нам бы­ст­рее и лег­че про­смат­ри­вать га­зе­ту и на­хо­дить ин­те­ре­сую­щие нас ма­те­риа­лы. Ко­гда мы бы­ва­ли в дру­гих го­ро­дах,то ви­де­ли, что те же са­мые (или с не­боль­ши­ми ва­риа­ция­ми) ус­лов­но­сти ис­пользо­ва­лись и во всех дру­гих га­зе­тах, по­это­му зна­ние этих обы­ча­ев уп­ро­ща­ло для нас чте­ние лю­бых га­зет. Лю­бое из­да­тель­ское со­об­ще­ст­во соз­да­ет свои обы­чаи и ус­лов­но­сти, за­тем раз­вива­ет их и соз­да­ет со вре­ме­нем но­вые. В Ин­тер­не­те су­ще­ст­ву­ет уже мно­го та­ких ус­лов­но­стей, боль­шин­ст­во из ко­то­рых бы­ло пе­ре­ня­то из га­зет и жур­на­лов. Ес­тест­вен­но, бу­дут по­яв­лять­ся и но­вые. Все обы­чаи воз­ни­ка­ют из чьих-то ори­ги­наль­ных идей. Ес­ли идея ра­бо­та­ет хо­рошо, то дру­гие сай­ты пе­ре­ни­ма­ют ее, и в кон­це кон­цов она на­чи­на­ет встре­чать­ся так час­то, что да­же не тре­бу­ет ка­ких-ли­бо объ­яс­не­ний. Ко­неч­но, этот про­цесс рас­про­стра­не­ния за­ни­ма­ет не­ко­то­рое вре­мя, но в Ин­тер­не­те он, так же как и все дру­гое в Се­ти, про­ис­хо­дит очень бы­ст­ро. На­при­мер, се­го­дня все зна­ко­мы с ме­тафо­ри­че­ской те­леж­кой для то­ва­ров, ко­то­рая ис­поль­зу­ет­ся в ин­тер­нет-ма­га­зи­нах,так что раз­ра­бот­чи­кам да­же нет не­об­хо­ди­мо­сти де­лать к ней под­пись «те­леж­ка для по­ку­пок».  

Сле­ду­ет знать две важ­ных ве­щи о веб-ус­лов­но­стях:

- Они очень по­лез­ны. Как пра­ви­ло, ус­лов­но­сти ста­но­вят­ся об­ще­при­ня­ты­ми,толь­ко ес­ли они ра­бо­та­ют. Ко­гда они пра­виль­но и к мес­ту при­ме­ня­ют­ся, то по­мо­га­ют поль­зо­ва­те­лям лег­ко пе­ре­хо­дить от од­но­го сай­та к дру­го­му, не заду­мы­ва­ясь о том, как все ра­бо­та­ет. Не­ко­то­рое при­ятель­ское чув­ст­во возни­ка­ет у поль­зо­ва­те­ля, ко­гда он видит зна­ко­мый спи­сок раз­де­лов сай­та,при­выч­но рас­по­ло­жен­ный на цвет­номфо­не на ле­вой сто­ро­не стра­ни­цы, да­же не­смот­ря на по­рой не­лов­кое ощу­щение де­жа­вю.

- Ди­зай­не­ры за­час­тую с не­охо­той приме­ня­ют ус­лов­но­сти. Вме­сто то­го чтобы ис­поль­зо­вать их, ди­зай­не­ры час­то стре­мят­ся вы­ду­мать ко­ле­со за­но­во. При­чи­на это­го за­клю­ча­ет­ся глав­ным об­ра­зом в том, что ди­зай­не­ры счи­тают (и не без ос­но­ва­ния), что их как рази на­ни­ма­ют, что­бы при­ду­мы­вать нечто но­вое. (Не го­во­ря уже о том, что по­хва­ла кол­лег, на­гра­ды и при­гла­шения к уча­стию в боль­ших про­ек­тах ред­ко по­яв­ля­ют­ся от уме­ния «луч­шевсех при­ме­нять ус­лов­но­сти».)

Ино­гда слу­ча­ет­ся, что «вы­ду­мы­вание ко­ле­са» за­вер­ша­ет­ся соз­да­ни­ем ре­во­лю­ци­он­но но­во­го вра­щаю­ще­гося уст­рой­ст­ва. Но ча­ще все­го, по­трачен­ное вре­мя так и ос­та­ет­ся лишь«вы­ду­мы­ва­ни­ем ко­ле­са». Ес­ли вы не хо­ти­те ис­поль­зо­вать некую об­ще­при­ня­тую веб-ус­лов­ность,то убе­ди­тесь сна­ча­ла, что то, чем высо­би­рае­тесь ее за­ме­нить, ли­бо яв­ляет­ся дос­та­точ­но яс­ным, по­нят­ными не тре­бую­щим уси­лий для изу­чения (т. е. яв­ля­ет­ся пол­но­цен­ным заме­ни­те­лем), ли­бо на­столь­ко по­лезным, что это ком­пен­си­ру­ет не­об­хо­ди­мость не­ко­то­ро­го уси­лия. Мно­гие ди­зайне­ры име­ют склон­ность не­до­оце­ни­вать об­ще­при­ня­тые обы­чаи и ус­лов­но­сти. Од­на­ко пе­ред вве­де­ни­ем ка­ких-ли­бо нов­шеств нуж­но учесть дей­ст­ви­тельную цен­ность то­го, что вы хо­ти­те за­ме­нить.

Мой со­вет за­клю­ча­ет­ся в сле­дую­щем: ис­поль­зуй­те но­вую идею, толь­ко ес­ли вы уве­ре­ны, что она дей­ст­ви­тель­но луч­ше (ес­ли, на­при­мер, ка­ж­дый, ко­му вы ее демон­ст­ри­руе­те, го­во­рит: «Ух ты, вот это да!»). Ес­ли же вы не уве­ре­ны, то не изобре­тай­те ко­ле­со – вос­поль­зуй­тесь об­ще­при­ня­ты­ми ус­лов­но­стя­ми.

Раз­бей­те стра­ни­цына чет­ко разделенные области

В идеа­ле веб-стра­ни­цы долж­ны быть по­строе­ны та­ким об­ра­зом, что­бы их можно бы­ло ис­поль­зо­вать, как в из­вест­ном иг­ро­вом шоу Ди­ка Клар­ка «Пи­ра­ми­дав $25000». Взгля­нув на стра­ни­цу, поль­зо­ва­тель дол­жен сра­зу ви­деть: «вот здесь то, что мож­но де­лать на этом сай­те», «вот здесь ссыл­ки на се­го­дняш­ние са­мые ин­те­рес­ные ис­то­рии», «вот здесь спи­сок то­го, что про­да­ет­ся», «вот здесь са­мые по­пу­ляр­ные то­ва­ры», «а вот здесь пе­ре­хо­ды к дру­гим раз­де­лам сай­та». Раз­де­ле­ние стра­ни­цы на об­лас­ти важ­но по­то­му, что это по­зво­ля­ет поль­зо­ва­телям бы­ст­ро по­нять, ка­кие об­лас­ти их ин­те­ре­су­ют боль­ше, а ка­кие они мо­гут про­пус­тить. Не­сколь­ко ис­сле­до­ва­ний, ка­сав­ших­ся то­го, как дви­жут­ся гла­за поль­зо­ва­те­лей при про­смот­ре веб-стра­ниц, под­твер­жда­ют, что поль­зо­ва­те­ли очень бы­ст­ро ре­ша­ют, ка­кие час­ти стра­ни­цы со­дер­жат по­лез­ную для них ин­форма­цию, и поч­ти ни­ко­гда уже не смот­рят на дру­гие час­ти, как буд­то они и не суще­ст­ву­ют.

По­ка­жи­те яс­но, по че­му мож­но щел­кать мы­шью

Боль­шая часть вре­ме­ни у поль­зо­ва­те­лей Ин­тер­не­та ухо­дит на по­ис­ки тех мест,по ко­то­рым мож­но щелк­нуть, по­это­му очень важ­но яс­но по­ка­зать, по че­му именно мож­но щел­кать мы­шью, а по че­му нель­зя. На­при­мер, на стра­ни­це кан­ди­да­та в прези­ден­ты 2000 го­да се­на­то­ра Ор­ри­на Хэтча бы­ло со­вер­шен­но не­яс­но, по ка­ж­до­мули мес­ту мож­но бы­ло щелк­нуть или везде нель­зя. На этой стра­ни­це бы­ло 18 ссылок, и толь­ко две из них име­ли вид, предпо­ла­гаю­щий та­кую воз­мож­ность: большая кноп­ка с над­пи­сью «Click here toCON­TRIB­UTE!» (На­жми­те сю­да, что­бы под­дер­жать!) и ссыл­ка с под­черк­ну­тым тек­стом «FULL STORY» (По­ка­зать полно­стью).

Ос­таль­ные ссыл­ки бы­ли вы­де­ле­ны только цве­том, но весь текст на стра­ни­це тоже был цвет­ным, и ви­зу­аль­но от­ли­чить их от про­сто­го тек­ста бы­ло не­воз­мож­но. Ко­неч­но, та­кая ошиб­ка не яв­ля­ет­ся ка­таст­ро­фи­че­ской, и я уве­рен, что боль­шинст­во поль­зо­ва­те­лей бы­ст­ро ра­зо­бра­лись,что к че­му, и ста­ли про­сто про­бо­вать щелкать мы­шью. 

Од­на­ко ко­гда вы за­став­ляе­те поль­зо­ва­те­лей раз­ду­мы­вать о чем-то, что во­об­ще недолж­но вы­зы­вать ни­ка­ких во­про­сов, в ча­ст­но­сти о том, где же мож­но щел­кать,вы рас­то­чае­те тот за­пас тер­пе­ния и бла­го­при­ят­но­го рас­по­ло­же­ния, ко­то­рый имеет ка­ж­дый поль­зо­ва­тель при зна­ком­ст­ве с но­вым сай­том. 

При­ве­ду еще один хо­ро­ший при­мер. Ка­ж­дый раз, ко­гда я поль­зу­юсь ок­ном по­ис­ка на сай­те drkoop.com (сайт док­то­раК. Эве­рет Куп, по­свя­щен­ный во­про­сам здо­ро­вья), ме­ня одо­лева­ют раз­мыш­ле­ния. 

Кноп­ка по­ис­ка со­всем не по­хо­жа на кноп­ку, да­же не­смот­ря на то, что в ее оформле­нии ис­поль­зо­ва­ны два силь­ных ви­зу­аль­ных клю­ча: рас­по­ло­же­ние и на­звание. Ря­дом с ок­ном на­хо­дит­ся сло­во «SEARCH» (ПО­ИСК), ко­то­рое яв­ля­ет­ся одним из двух ва­ри­ан­тов иде­аль­но­го на­зва­ния для кноп­ки по­ис­ка. 

Бо­лее то­го, тут же рас­по­ло­же­на не­боль­шая тре­уголь­ная стрел­ка, из­вест­ная как ус­лов­ный ука­за­тель «На­жать здесь». Од­на­ко стрел­ка на­прав­ле­на в сто­ро­ну от тек­с­­­та, как буд­то она по­ка­зы­ва­ет ку­да-то еще, хо­тя ее ус­лов­ное ис­поль­зо­ва­ние требу­ет, что­бы она бы­ла на­прав­ле­на к тек­сту, по ко­то­ро­му на­до щел­кать мы­шью.

Для то­го что­бы снять во­прос, воз­ни­каю­щий в мо­ей го­ло­ве вся­кий раз, ко­гда я поль­зу­юсь этим по­ис­ко­вым ок­ном, дос­таточ­но все­го лишь пе­ре­мес­тить стрел­ку на ле­вую сто­ро­ну, перед тек­стом

Умень­ши­те ви­зу­аль­ный шум

Ви­зу­аль­ный шум яв­ля­ет­ся од­ним из ос­нов­ных пре­пят­ст­вий для по­лу­че­ния лег­ко вос­при­ни­мае­мых веб-стра­ниц. Мож­но вы­де­лить два ти­па ви­зу­аль­но­го шу­ма:

-Пе­ре­гру­жен­ность. Не­ко­то­рые веб-стра­ни­цы вы­зы­ва­ют у ме­ня вос­по­ми­нания о чте­нии пи­сем из из­да­тельств, ко­гда нуж­но от­пра­вить об­рат­но за­полнен­ную фор­му и умуд­рить­ся при этом слу­чай­но не под­пи­сать­ся на ка­кой-нибудь жур­нал.

Ес­ли на стра­ни­це на­хо­дит­ся ог­ром­ное ко­ли­че­ст­во все­воз­мож­ных при­зы­вов, при­гла­ше­ний к по­куп­кам, бес­чис­лен­ное мно­же­ст­во вос­кли­ца­тель­ных знаков и яр­ких цвет­ных вы­де­ле­ний, то все это вы­зы­ва­ет эф­фект дав­ле­ния.

-Фо­но­вый шум. Не­ко­то­рые стра­ни­цы на­по­ми­на­ют об­ста­нов­ку ка­кой-то ве­черин­ки – нет гром­ко­го ис­точ­ни­ка, от­вле­каю­ще­го вни­ма­ние, но есть мно­же­ство эле­мен­тов ви­зу­аль­но­го шу­ма, ко­то­рые в со­во­куп­но­сти вы­зы­ва­ют ощу­тимое раз­дра­же­ние.

На­при­мер, на сай­те MSNBC ис­поль­зу­ют­ся ме­ню, ко­то­рые пред­став­ля­ют со­бой мощ­ные ин­ст­ру­мен­ты на­ви­га­ции, по­зво­ляю­щие поль­зо­ва­те­лям бы­ст­ро пе­ре­мещать­ся к лю­бо­му ма­те­риа­лу на сай­те. Од­на­ко на­зва­ния ма­те­риа­лов в этих ме­ню от­де­ле­ны ме­ж­ду со­бой чер­ны­ми ли­ния­ми, ко­то­рые за­труд­ня­ют вос­при­ятие. Ес­ли бы ли­нии бы­ли се­ро­го цве­та, то про­смат­ри­вать спи­ски бы­ло бы на­мно­го лег­че. 

Поль­зо­ва­те­ли по-раз­но­му вос­при­ни­ма­ют стра­ни­цы со слож­ной вер­ст­кой и большим чис­лом ком­по­нен­тов. Не­ко­то­рые лег­ко пе­ре­но­сят пе­ре­гру­жен­ные стра­ни­цыи фо­но­вый шум, но для мно­гих это соз­да­ет про­бле­мы. При раз­ра­бот­ке веб-страниц ра­зум­но ис­хо­дить из то­го, что все яв­ля­ет­ся ви­зу­аль­ным шу­мом до тех пор, по­ка не до­ка­за­но об­рат­ное.