Pull to refresh

Юзабилити и дизайн интерфейсов для хардкорных программеров

Reading time 15 min
Views 16K
С того момента как я начал программировать я наблюдал и думал об одном особом явлении — как большинство программистов активно избегают всего, что касается дизайна интерфейсов и вопросов юзабилити.


Я понимаю, откуда это пришло. Большинство программистов любят программировать. Они готовы учиться новым особенностям языков программирования, пробуют новые компоненты и библиотеки, улучшают свои алгоритмы и архитектуру кода или скажем оптимизируют структуру используемых данных. Это кажется очень важным, потому что, программа хороша настолько, насколько хороши её коды и алгоритмы и насколько все это оптимизировано. И это так. Но только если программы пишутся для программистов.

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

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

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

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

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

Что ж, тогда начнем наш разговор. Я постараюсь, что бы вы не заснули в процессе чтения.

1. Не говорите с пользователями на языке гиков


Обычные пользователи не технари и могут просто не знать, что вы хотите им сказать. Не нужно им показывать сообщение, например, что какая-то DLL библиотека отсутствует или же что COM-объект не может зарегистрировать свойство. Как это поможет им понять и исправить эту проблему? Для большинства пользователей интернета слова как JavaScript, CSS и HTML не значат ровным счетом ничего. Они примерно понимают идею браузеров, страниц и этого вашего интернета как-то все этого соединяющего. Сообщение «Ошибка HTTP 404» будет являться для них бесполезной информацией. Лучше сделать что-то типа «Страница запрашиваемая вами не найдена», это объяснит намного больше пользователю. Всякий раз когда вам нужно сообщить пользователю что-то, старайтесь думать о том, как большинство пользователей это поймет. Никто не будет вызывать DllRegisterServer вручную, чтобы исправить вашу проблему с недостающим СОМ-объектом. Но если вы сообщите пользователю, что одна из компонент программы отсутствует (и скажете какой именно), они смогут понять, что возможно нужно вставить диск с этой программой или компонентой и установить её.

2. Не пишите длинные тексты


Потому, что их все равно никто не читает. Да, да вспомните лицензии к программам. Если в Windows + Linux + MacOS добавить строчку, что вы бесплатно отдаете свою душу сатане, 99,9% все равно нажмут кнопку далее. Чем больше текста, тем больше шансов, что пользователь его не прочтет. Эмпирически нечто большее, чем полторы строки будет рассматриваться как длинный кусок текста, а не короткое сообщение и, следовательно, будет игнорироваться. Причиной является то, что пользователи нетерпеливы. Интернет пользователи потратят максимум 5 секунд, чтобы взглянуть впервые на вашу страницу, прежде чем их отпугнет куча текста на ней.

Пользователи заинтересованы только в решении своих задач. Придерживайтесь политики 2–3 слов для заглавия и 5–8 для описания. Используйте так же методы для группировки нескольких объектов интерфейса вместе с помощью цвета или разделяя группы пробелами. Так же очень хорошим решением может послужить наличие специального знака вопроса, на который пользователи могут навести и получить развернутое описание элемента, если оно им понадобится.

3. Забудьте про документацию


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


4. Не перегружайте пользователей множеством элементов


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

5. Один экран — одна задача


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

6. Создавайте простой и интуитивный интерфейс


Ничто не может раздражать пользователей столь же сильно, как понимание, что есть какая-либо необходимая им функция, но они не могут найти её в ваших меню и диалоговых окнах. Это сильно раздражает. Пользователи чувствуют, что они не могут управлять программой. Это как одна шутка на тему веб-дизайна: «Знайте, вы потерпели неудачу с дизайном, если пользователям нужно использовать поиск браузера (Ctrl+F), для того, чтобы найти вашу панель поиска». Очень важно чтобы идея программы была простой и логичной, и тогда дизайн навигации будет отражать эту модель. Объединяйте функционал в логические группы. Давайте пользователям подсказки как они могут изменить стандартные настройки. Постарайтесь сделать так, чтобы пользователь мог легко догадаться, где он может найти необходимый ему функционал, конечно если он реализован.


7. Выделяйте важные элементы


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

8. Сфокусируйтесь на действиях пользователя, а не на возможностях программы


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


9. Перенесите часто используемый функционал на первое место


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

10. Минимизация кликов


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


11. Избегайте непривычного поведения интерфейса


Одна из ошибок, которая точно смутит пользователей — это использование нестандартных элементов интерфейса с нестандартным видом и что ещё серьезней с нестандартным поведением. Обычно такое можно увидеть на сайтах с оригинальным дизайном, где веб-мастера могут дать выход своему креативу. В результате получается отличный дизайн, и красивый и функциональный. Но иногда креатив берет на себя функции по юзабилити и этим создает барьер между пользователем и программой. Примеры легко найти. Например ссылки без подчеркивания или когда они имеют цвет, слабо отличающийся от цвета остального текста. Или, например области экрана выглядящие как большинство других, но реагирующих на нажатие или открывающих другое окно. Вот один из примеров с сайтом Flickr. Когда вы хотите изменить заголовок фотографии, вы можете потратить много времени чтобы понять как вам это сделать. Я потратил немало времени, прежде чем случайно нажал на текущий заголовок. Этот текст выглядел обычным, как другой на странице, но при нажатии превратился в поле ввода. Это не интуитивно, и пользователю сложно догадаться о таком поведении. Таких случаев стоит избегать. Когда интерфейс реагирует по-другому, чем ожидает от него пользователь, это плохо. Зная это, вы должны с осторожностью объединять креатив и юзабилити, стараясь не навредить удобству пользователя.


12. Создавайте единообразное оформление


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

Я всегда вспоминаю один пример плохой идеи интерфейсов — интерфейс мобильных телефонов Samsung. Их интерфейс направлен на то, чтобы произвести впечатление на пользователя красочными иконками, сообщениями и анимацией когда они играются с этим телефоном в магазине. Вы можете попасться на эту уловку, но потом ваше мнение может измениться. Дизайнеры использовали большое количество цветов на каждом экране, которые могут отличаться в других частях интерфейса. В одном месте ввод красного цвета, а системные сообщения зеленые, в другом оранжевый и серый, в третьем голубой и фиолетовый. Возможно это хорошо, если дать ребенку поиграться, но если вы взрослый человек, вам это может сильно не понравится. Вам нужно понять концепцию для каждого экрана и запомнить её. Это совершенно неправильно. На мой взгляд, лучше определить 2–3 цвета и использовать их везде.

Используйте везде одинаково выглядящие меню. Используйте стандартные кнопки «Ок» и «Cancel». Никогда не объединяйте функции авто сохранения с необходимостью нажатия кнопки «Save».

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

13. Уберите ненужные элементы


Взгляните с практической стороны на свой интерфейс и спросите себя, все ли эти элементы нужны для эффективной работы пользователя. Объясняет ли текст функционал, который может использовать пользователь или он чтобы пользователю было не скучно? Чем меньше ненужных и вспомогательных элементов будет на экране, тем более простым и открытым он будет выглядеть. Все ли элементы должны быть видны сразу? Если нужны только некоторые из них, возможно стоит перенести редко используемые элементы в диалоговое окно «Дополнительно». Чем меньше ненужных элементов будет видеть пользователь, тем легче ему будет работать над своими задачами.

14. Не задавайте уйму вопросов


В процессе общения с пользователем постарайтесь свести к минимуму количество запросов, где пользователь должен сделать выбор. Если это момент когда пользователь должен ответить на заранее определенные вопросы, дайте возможность выбрать оптимальный ответ по-умолчанию. Иногда, программы просят сделать выбор во время первого запуска. Это неправильно, так как в большинстве случаев пользователь ответит на поставленные вопросы неверно, особенно если ответы требуют специфических знаний, которые пользователь сможет получить только после опыта работы с программой. Поэтому если вам необходимо определить какие-либо настройки до старта программы, предлагайте пользователю стандартные настройки и если он уже имел опыт работы с программой, он изменит необходимые свойства, а если нет, это не введет его в тупик и он сможет использовать определенные вами настройки. При создании таких вопросов, попробуйте посмотреть на них глазами пользователя. Думаю не стоит в самом начале спрашивать насчет форматов данных, синхронизации и функций с которыми пользователь ещё не сталкивался. Определите настройки так, как это было бы полезно начинающему пользователю (скажем включение максимального количества подсказок и советов) и дайте возможность пользователям со временем изменить данные настройки.

15. Используйте небольшой набор цветов


В своем интерфейсе постарайтесь не использовать много цветов, 2–3 будет вполне достаточно. В основном это касается веб-страниц. Определите цвета для основного текста и пользовательского ввода. Используйте эти цвета на всех страницах или окнах вашего приложения. Если вы используете оранжевые кнопки с красным текстом, используйте их везде. Если вы посмотрите на продукты больших компаний, то сможете увидеть, что в основном во всем продукте используется 2–3 цвета (черный и белый не учитываются). Если же вам нужен плохой пример посмотрите на сайты интернет магазинов, там будет много ярких цветов, чтобы привлечь внимание. С точки зрения маркетинга, возможно это и хорошо, но с точки зрения юзабилити — это ужасно.


16. Адаптируйтесь к мышлению пользователей


Вне зависимости, какой концепции дизайна вы придерживаетесь, оцените его критически. Посмотрите на него глазами пользователей. Представьте себе обычного пользователя, со знаниями работы в таких же программах как ваша. Смогут ли они сразу понять идею вашего дизайна, если они не являются ни разработчиками, ни дизайнерами и не обладают обширными знаниями работы с компьютерами? Смогут ли они догадаться, что делает та или иная функция или стоит добавить небольшое объяснение? Смогут ли они найти какие-нибудь настройки, только представляя где они должны находится? Поведение вашего интерфейса похоже на поведение других программ или отличается и потребуется время на адаптацию? Похож ли ваш интерфейс и поведение на другие схожие продукты? Чем больше будет разница, тем больше потребуется времени на изучение (пример — Ribbon в MS Office). На веб-сайтах с высокой конкуренцией, пользователь может просто закрыть браузер, если не поймет как с ним обращаться и  может перейти на другой схожий сайт всего за пару кликов. Для большинства пользователей оформление вашего продукта определяет его суть. Не сложные алгоритмы, совершенные структуры данных или отличная архитектура, а простой интерфейс, его вид и поведение. Именно это. Это то с чем столкнутся пользователи, прежде чем узнают о ваших отличных алгоритмах и возможностях программы.

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

Данная статья является переводом и адаптацией статьи Interface design and usability for hardcore programmers из блога DeveloperART.

Tags:
Hubs:
+93
Comments 75
Comments Comments 75

Articles