ДизайнЮзабилити. Вводный курс

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

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

Сразу хочу сказать, не ограничивайте своё мышление. Понятие юзабильности распространяется не только на сферу IT, но и на все предметы, которые можно использовать, будь то зажигалка или холодильник.

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

Но не будем о грустном, а перейдём пожалуй прямо к делу. Что такое юзабилити я уже сказал, теперь выясним, зачем вообще стоит обращать внимание на такие "мелочи". А всё очень просто, давайте рассмотрим пример.

Какая-то контора пишет некоторое ПО. Никто не задумывается о том, кто целевая аудитория, с чем они привыкли работать, а просто пишут код, дизайн и архитектура остаются на усмотрение разработчика. И вот проект сдан, шампанское открыто, бабки получены. Однако вскоре приходит разъярённый заказчик и говорит: "Что вы сдали? Приложение не скачивают, отзывы - полное говно!". А всё почему? Потому что пользователям было неудобно работать с программой/сайтом/аппом. Вот они и используют более удобные аналоги.

К слову сказать, сейчас все крупные компании очень важную роль отдают дизайну своих продуктов, порой даже большую, чем качеству кода. Я уже прямо вижу ваши лица ( О_о ), мол "что за нах?". А отвечу я простой арифметикой. С точки зрения кода, программист может ускорить работу программы, путём оптимизации алгоритмов и новых методик на 1 - 3 секунды, в лучшем случае. В то время как оптимизация интерфейса или дизайна может ускорить работу пользователя на десятки секунд. (Программисты не обижайтесь, я просто подчёркиваю важность проблемы).

А теперь самая соль, как же определить насколько удобно пользоваться предметом (сайтом, приложением, тостером, гладильной доской). А что обычно делают, когда хотят удостовериться, что проложение работает нормально? Правильно! Тестируют. Вот и ответ на вопрос. Замечу, что тестировать можно всё, что угодно, начиная с сайтов и заканчивая логотипами! (если конечно ограничиться рамками нашей сферы).

Выше я говорил, что мы рассматриваем всё с точки зрения пользователя, а значит нужно спросить у него. А лучше сперва обратиться к опыту, уже накопленному другими умными людьми.

Понятие user expeirience.

Это заумное словосочетание ввёл в массы Дональд Норман в середине 90х. Это было настоящим прорывом в сфере юзабилити. Если коротенько, то user expeirience (опыт пользователя), это то, как пользователь представляет себе использование того или иного продукта, основываясь на своём предыдущем опыте и интуиции. Поясняю на примере:

Вам нужно найти что-то конкретное, о своей собаке, допустим (не дай Бог) у неё понос и вы не знаете что делать. Быстро в поисковичок, забили запрос, вас выбросило на такой вот сайт (сейчас мы не рассматриваем дизайн с точки зрения эстетической прекрасности, так что терпите).

nosearch.jpg
О нет! Где поиск блина!

Что вы первым делом сделаете? Начнёте искать информацию, а как? Сразу рассмотрите верхнюю часть сайта в поиска поиска (простите за каламбур). Но, о Боже! Его там нет, а собачку уже напирает и вы яро крутите злосчастное колёсико мыши пытаясь заприметить такое желанное поле ввода. Вы тратите своё время, на поиски нужного вам элемента, потому как ваши ожидания о том, где он должен находиться, не оправдались.

Всё бы случилось иначе, если бы вы попали на такой сайт:

search.jpg
Ох. вот поиск, держись Каштанка, я сейчас!

Тут поле поиска видно сразу, а значит и информацию вы нашли бы раньше, а следовательно бедную собачку перестало бы разрывать, после правильной таблетки.

Вывод из всего вышесказанного таков: У пользователя уже существует своё представление о том, как должен работать ваш продукт, и хорошей практикой будет подтверждать его догадки или не давать ему повода мыслить неверно. Все важные для использующего элементы должны находиться сразу в пределах видимости и на местах, свойственных им.

Например в дополнение к поиску (который вы теперь всегда будете втыкать в верхнюю часть страницы) идёт регистрация и поля логина и пароля. В большинстве своём они располагаются в правой части шапки и пользователь будет искать их именно там.

Сразу хотелось бы подчеркнуть, что все элементы, которые вы используете не должны допускать двоякого истолкования, то есть должны быть предельно простыми и однозначными. Это актуально при использовании инфографики (картинок, отображающих информацию, в частности иконок).

infografics.jpg
Привожу пример ясного и чёткого выражения основной мысли, хотя некоторые стоило доработать

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

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

В завершении вводной лекции хочу подвести небольшое резюме:

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

На этом всё. В следующей статье я расскажу о том, как выявить недостатки юзабилити. Ну и конечно как их устранить.

Всем спасибо, все свободны.

Комментарии

Аватар пользователя Niklan
Niklan написал:

Как реализован вход в всплывающем окне?

17.11.2011 20:23
Аватар пользователя Smouk
Smouk написал:

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

Хотя вопрос наверное был не мне... но всё же )

17.11.2011 23:16
Аватар пользователя Spleshka
Spleshka написал:

Читаем статью про popup логин.

18.11.2011 13:37
Аватар пользователя Niklan
Niklan написал:

Премного благодарен

18.11.2011 17:15
Аватар пользователя drupby
drupby написал:

зачем изобретать велосипед по новой , если уже есть Fancy Login ?

26.11.2011 23:03
Аватар пользователя Кто то из болота
Кто то из болота написал:

Советую плагин на лисичку,а так всё здорово и интересно!
Ждём следующих уроков!!

19.11.2011 03:22
Аватар пользователя Smouk
Smouk написал:

Спасибо, плагин отличный, заюзал для следующей статьи ;)

20.11.2011 00:53

Комментировать