Просто Studio
Главная » 2013 » Август » 2 » Юзабилити сайта: распространенные ошибки
Юзабилити сайта: распространенные ошибки
За пос­ледние де­сять лет в ми­ре веб-ди­зай­на ос­новным воп­ро­сом об­сужде­ния бы­ло ка­чест­вен­ное юза­били­ти. С каж­дым днем важ­ность это­го ас­пекта толь­ко уве­личи­ва­ет­ся. Хо­рошее юза­били­ти мо­жет не толь­ко по­мочь при прод­ви­жении и уз­на­ва­емос­ти то­вара на рын­ке, но и улуч­шить мне­ние по­сети­телей о про­дук­те, ли­бо ком­па­нии в це­лом. Хо­рошее юза­били­ти так­же ло­жит­ся в ос­но­ву удач­ных стар­та­пов. Как это не ба­наль­но, но все же са­мыми ин­но­ваци­он­ны­ми в боль­шинс­тве слу­ча­ев яв­ля­ют­ся имен­но прос­тые идеи, и не­мало­важ­но при этом об­ра­щать вни­мание на удобс­тво: сде­лав функ­цию или про­дукт удоб­ным в  ис­поль­зо­вании и сох­ра­нив при этом ка­чест­во. В этой статье мы пос­та­ра­ем­ся кос­нуть­ся воп­ро­сов по юза­били­ти сайтов.

Термин «юзабилити» вошел в употребление как синоним понятий «эргономичность», «удобство использования», «дружественность», поэтому если речь идет о юзабилити сайтов, то под ним подразумевается удобство и простота использования сайта.


Рассмотрим важные пункты, из которых состоит юзабилити сайта


Цвет ссылок

Очень час­то мы по­сеща­ем стра­ницы, где цвет ссы­лок сли­ва­ет­ся с цве­том ос­новно­го текс­та. Это од­на из са­мых глу­пых оши­бок, ко­торые мы толь­ко мо­жем предс­та­вить. Поль­зо­вате­ли долж­ны ви­деть, где на­ходит­ся эле­мент на­вига­ции, и где они мо­гут клик­нуть. Вы прос­то не име­ете пра­ва зас­тавлять их ис­кать ссыл­ки пу­тем на­веде­ния  кур­со­ра мы­ши на сло­ва, и ждать, по­ка кур­сор не из­ме­нит­ся на ука­затель.

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

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



Плохая типографика

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

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

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

Да­вай­те расс­мот­рим это под­робнее. Ос­новные осо­бен­ности двух пос­ледних тен­денций в ми­ре веб-ди­зай­на — ми­нима­лиз­ма и плос­ко­го ди­зай­на — ак­цент на со­дер­жа­нии (в от­ли­чие от ди­зай­нов с ис­поль­зо­вание фо­новых изоб­ра­жений). Глав­ная при­чина та­кой по­пуляр­ности ми­нима­лиз­ма и flat-ди­зай­на — прос­то­та и ра­ботос­по­соб­ность — по­рой да­же не ве­рит­ся, что сайт со столь­ко прос­тым ди­зай­ном мо­жет быть на столь­ко ус­пешным. Лю­ди при­ходят, чи­та­ют со­дер­жа­ние и ухо­дят. Ни флэш, ни ja­vasc­ript, ни дли­тель­ная заг­рузка сай­та, ни слож­ная гра­фика — нич­то их не отв­ле­ка­ет от текс­то­вого кон­тента сай­та.

На дан­ный мо­мент вы долж­ны по­нять, на сколь­ко важ­но сде­лать кон­тент чи­табель­ным. Сог­ла­ситесь, да­же слиш­ком кра­сивый шрифт не спа­сет ваш текст, ес­ли он со­вер­шенно не чи­та­ет­ся.




Отсутствие ответов на вопросы

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

Очень важ­но пом­нить, что в боль­шинс­тве слу­ча­ев по­сети­тели на­ходят­ся на сай­те в по­ис­ках ин­форма­ции. Де­ла­ют они это  с по­мощью  Go­og­le или Яндекс, за­ходят на Ви­кипе­дию или пе­рехо­дят на сайт ком­па­нии для по­луче­ния ин­форма­ции о то­варах или ус­лу­ги — цель есть всег­да.

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

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

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


Ма­лень­кие раз­ме­ры кли­кабель­ных об­ластей

Ма­лень­кий раз­мер кли­кабель­ной об­ласти — очень не­удоб­но. Вы мо­жете умень­шить шрифт, что­бы текст выг­ля­дел бо­лее кра­сивым, но в та­ком слу­чае за­быва­ете о юза­били­ти (не го­воря уже о чи­та­емос­ти).

Важ­но убе­дить­ся, что­бы ссыл­ки бы­ли вид­ны. Чем мень­ше пло­щадь ссыл­ки, тем слож­нее че­лове­ку на­жать на нее. Сей­час, ког­да ди­зайн ста­новит­ся адап­тивным, очень важ­но не за­бывать наст­ра­ивать ди­зайн кно­пок под ма­лень­кий эк­ран — они долж­ны быть боль­ше.


Отсутствие контактной информации

Иног­да не­ре­аль­но доб­рать­ся до сер­ви­са поль­зо­ватель­ско­го ин­терфей­са, ли­бо до кон­такт­ной ин­форма­ции.

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

Не­ту при­чин не по­казы­вать кон­такт­ную ин­форма­цию. Ес­ли вы не хо­тите да­вать ин­форма­цию о  лич­ных дан­ных, на­пиши­те элект­рон­ную поч­ту. Хо­тите из­бе­жать спа­ма? Ис­поль­зуй­те кон­такт­ную фор­му, недос­тупную для бо­тов. По­дели­тесь ссыл­ка­ми  на Twit­ter или Fa­cebo­ok — все что угод­но. Не име­ет зна­чение, ка­ким об­ра­зом вы обес­пе­чили поль­зо­вате­лям воз­можность свя­зи с ва­ми.




Отсутствие поиска

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

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

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


Запрос регистрации

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

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

Прос­мотр про­дук­тов, ко­торые вы соз­да­ете, про­да­ете или про­из­во­дите, не дол­жен зап­ра­шивать у поль­зо­вате­лей ин­форма­цию для ре­гист­ра­ции. Ина­че они мо­гут по­чувс­тво­вать се­бя об­ма­нуты­ми, и вы их по­теря­ете нав­сегда. Хо­рошим при­мером яв­ля­ет­ся Fru­it Nin­ja- по­пуляр­ная иг­ра на IOS, для ко­торой вы­ходит де­мо-вер­сия. Пос­ле то­го, как вы прош­ли де­мо-вер­сию, вы обя­затель­но за­хоти­те пе­рей­ти на бо­лее слож­ный уро­вень. Смог бы я рань­ше ку­пить эту иг­ру, не поп­ро­бовав ее? Ко­неч­но, нет.

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


Регистрационные формы

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

Се­год­ня мож­но соз­да­вать учет­ные за­писи с по­мощью Twit­ter или Fa­cebo­ok API ло­гина. Это хо­рошая идея и она де­ла­ет про­цесс ре­гист­ра­ции нам­но­го про­ще и быст­рее. Те­перь Вам боль­ше не при­дет­ся за­поми­нать ло­гин и длин­ный па­роль.




Не­пос­ле­дова­тель­ность ди­зай­на

Ког­да веб-стра­ница име­ет бе­лый фон и на­вига­цию в шап­ке, не де­лай­те стра­ницу «Abo­ut»  тем­ной с на­вига­ци­ей в фу­тере. У поль­зо­вате­лей бу­дет воз­ни­кать воп­рос, на этом он сай­те на­ходит­ся, или уже пе­решел на дру­гой. Сох­ра­няй­те стиль ди­зай­на от­но­ситель­но все­го сай­та. Ис­поль­зо­вание сис­тем се­ток по­может в этом. Ана­логич­ный прин­цип сох­ра­ня­ет­ся и для цве­та фо­на, ссы­лок ти­пог­ра­фики.


Неп­ра­виль­ное ис­поль­зо­вание изоб­ра­жений

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

Просмотров: 1945 / Познакомьтесь с другими публикациями: Новости и статьи