Захватывающие и полезные проекты происходят потому, что пользовательский интерфейс работает над неутомимо. Требуется настоящий мастер пользовательского интерфейса, чтобы понять, как сделать потрясающий пользовательский опыт на веб-сайте. Вот 10 чрезвычайно полезных принципов от некоторых из самых ярких умов в области пользовательского интерфейса.
Пользовательские интерфейсы (UI) — это то, что отличает первоклассные сайты от дрянных. Отсутствие полезного пользовательского интерфейса может сделать чрезвычайно полезное веб-приложение бесполезным. Почему? Потому что интерфейс не был продуман и тщательно протестирован. Если пользователь не может легко перемещаться по веб-сайту, он с радостью перейдет к другому подобному сайту, который обеспечивает лучший пользовательский опыт.
1. Не забывайте о пользователе — Джейсон Фрид
Почти каждый веб-разработчик слышал о 37 сигналах . Они являются явными лидерами в области гибкой разработки, но, что более важно, они создают довольно классные веб-приложения . На самом деле настолько удивительным, что их обычно считают одними из самых умных людей, когда дело доходит до проникновения в головы пользователя.
Генеральный директор 37 Signals Джейсон Фрид (Jason Fried) — большой сторонник того, чтобы тратить меньше времени на мелкие детали и создавать
более полезные интерфейсы с учетом потребностей пользователя.
«Слишком много разговоров о CSS и XHTML, а также о стандартах и доступности и недостаточно о людях. Код и CSS, совместимые со стандартами, — это всего лишь инструменты. Вы должны знать, что создавать с помощью этих инструментов. Отлично, я рад, что ваш пользовательский интерфейс не работает. не используют таблицы. Ну и что? Кому все равно, если это все еще не так, пусть люди достигают своих целей. Веб-стандарты великолепны, но собственные стандарты людей включают в себя выполнение задач (и это все еще слишком сложно сделать в Интернете). «
Дизайнеры пользовательского интерфейса делают те же самые старые фундаментальные ошибки и забывают о человеке с другой стороны, чтобы их код выглядел лучше. Люди, а не валидаторы кода, используют интерфейсы. «
Работая со слоями кода в течение нескольких недель, иногда трудно отступить назад и вспомнить, что наши сайты используются людьми, а не роботами. Это не значит, что нам вообще не следует беспокоиться о стандартах. Стандарты отличные и должны соблюдаться. Мы просто не можем предположить, что соответствие стандартам — это все, что нужно для создания хорошего интерфейса.
2. Не забывайте об ошибках страницы — Якоб Нильсен
Страницы с ошибками — это то, что большинство веб-разработчиков (включая меня) любят просто прятаться. Это крошечная деталь, которая затрагивает лишь небольшую часть посетителей нашего сайта, верно?
Эксперт по юзабилити Якоб Нильсен утверждает, что, возможно, мы просматриваем 404 страницы ошибок в неправильном свете . Может быть, мы должны просматривать страницу с ошибкой в качестве учебного пособия .
Наиболее распространенное нарушение правил — когда в сообщении об ошибке просто говорится, что что-то не так, без объяснения, почему и как пользователь может решить проблему. Такие сообщения оставляют пользователей в затруднительном положении.
Информативные сообщения об ошибках не только помогают пользователям решить их текущие проблемы, они также могут служить обучающим моментом. Как правило, пользователи не будут тратить время на чтение и изучение функций, но они потратят время на то, чтобы понять ситуацию с ошибкой, если вы четко ее объясните, потому что они хотят преодолеть ошибку.
3. Всегда устанавливайте цвет фона — Джеффри Зельдман
Джеффри Зельдман — основатель фирмы по веб-дизайну Happy Cog , автор , а также основал A List Apart , потрясающие ресурсы для веб-разработчиков. Если кто-то знает, как сделать правильный пользовательский интерфейс, это Зельдман.
Джеффри отмечает, что одним из ключевых моментов в веб-разработке, который значительно упускается из виду, является отсутствие настройки цвета фона .
Поразительно, сколько веб-дизайнеров забывают указать цвет фона на своем сайте. Они будут тратить месяцы на перебор каркасов и разработку дизайна; написать CSS-хаки для браузеров до этого века; проверить их работу на всем: от Blackberry до старых компьютеров Mac, работающих под управлением System 7; и, конечно, они будут проверять свою разметку и таблицы стилей. Но после всего этого они забудут применить цвет фона к своему сайту, и они не будут проверять это.
4. Не переусердствуйте специальные возможности — Роджер Йоханссон
Доступность — это фантастическая вещь, которую разработчики могут использовать при создании веб-приложения. Однако, кажется, что иногда мы можем немного увлечься тем, чтобы сделать наши сайты и формы доступными. Гуру дизайна Роджер Йоханссон (Roger Johansson) отмечает, что избыточный доступ иногда может быть дорогостоящим для наших пользовательских интерфейсов.
Иногда, когда люди впервые узнают о доступности Интернета, они ищут быстрые способы улучшения сайтов, которые они создают. Это часто приводит к неправильному использованию или чрезмерному использованию определенных функций HTML, которые предназначены для обеспечения доступности, но при неправильном использовании не имеют никакого эффекта и могут фактически иметь противоположный эффект, делая страницу менее доступной и менее пригодной для использования.
Многие из часто используемых функций специальных возможностей являются атрибутами HTML. Мне кажется, что их неправильно используют либо разработчики, которые имеют в виду хорошо, но не совсем понимают, как атрибуты помогают конечным пользователям, или разработчики, которые добавляют их просто для того, чтобы иметь возможность отметить «Доступность» в своем списке дел и закрыть их менеджер, клиент или кто-то еще приставает к ним, чтобы сделать сайт более доступным.
5. Используйте Эпицентр Дизайн — Джейсон Фрид
Г-н Фрид из 37 Signals появляется в нашем списке еще раз, благодаря его превосходному совету о том, как обеспечить, чтобы самый важный аспект дизайна всегда разрабатывался первым. Он придумал этот метод как « Эпицентр Дизайн ».
Эпицентр Дизайн включает в себя сосредоточение на истинной сущности страницы («Эпицентр»), а затем наращивание. Это означает, что не нужно начинать с навигации / вкладок, или нижнего колонтитула, или с цветов, или с боковой панели, или с логотипом и т. Д. Это означает, что нужно начинать с той части страницы, которая, в случае изменения или удаления, изменит всю цель страница. Это эпицентр.
Использование метода Epicenter Design позволяет сфокусировать наши пользовательские интерфейсы и гарантирует, что мы не «упустим из виду» страницы.
6. Следите за своими пользователями — Коллис Таид
Collis Ta’eed от NETTUTS предлагает отличные советы для веб-разработчиков по всему миру: используйте пользовательское тестирование . Когда вы проводите бесчисленные часы, глядя на один и тот же дизайн вашего монитора, иногда легко забыть, как пользователь мог использовать веб-сайт. На самом деле, обычный пользователь может использовать ваше приложение совсем иначе, чем мог себе представить.
Первое, что вам нужно понять, это то, что когда вы проводите какое-либо пользовательское тестирование, это сделает вас лучшим веб-дизайнером. Вы точно увидите, как люди используют ваш веб-дизайн, и есть большая вероятность, что вы будете удивлены, как они это делают. То, что вы считаете очевидным, часто не так, текст, который, как вы думали, объясняет что-то, даже не читается, и вообще говоря, пользователи делают то, что им не следовало делать. Даже если единственное пользовательское тестирование, которое вы когда-либо проводите, — это попросить друзей использовать сайт, пока вы наблюдаете за ними, вы уже будете лучше к нему, независимо от самого проекта.
Знание того, как пользователи взаимодействуют и используют ваш сайт, является невероятно ценной информацией, и при правильном использовании может значительно изменить ваш пользовательский интерфейс, чтобы лучше соответствовать вашим пользователям.
7. Дайте стимулы пользователям заполнять формы — Джим Кукрал
Что может показаться глупым понятием, легко забыть, что пользователям сайта нужен стимул для таких вещей, как заполнение форм и взаимодействие на вашем сайте. Никто не понимает это лучше, чем успешный интернет-маркетолог. Джим Кукрал указывает на то, что для того, чтобы иметь успешный пользовательский интерфейс, пользователи должны каким-то образом получить выгоду для заполнения таких вещей, как обратная связь или формы регистрации.
Пользователь должен чувствовать, что ценность или результат превышает стоимость (или время) необходимости заполнения формы. Поэтому, если вы не предоставите пользователям что-то ценное взамен, шансы на то, что пользователь выполнит задачу, уменьшатся.
Стимулы могут быть тем, что вы готовы предоставить. Вот примеры возможных стимулов:
- Отдайте подарочный сертификат на некоторые из ваших продуктов в обмен на контактную информацию пользователя.
- Предоставьте пользователю шанс для участия в лотерее или другом виде конкурса.
- Предложите бесплатную загрузку некоторого экспертного контента или информации, имеющей отношение к бизнесу под рукой.
8. Держите пользовательский интерфейс согласованным — Якоб Нильсен
Якоб Нильсен исследовал пользователей сети более десяти лет. Он дал множество советов по теме создания пользовательского интерфейса, более удобного для пользователя, но один из его лучших советов — поддерживать согласованность элементов дизайна .
Согласованность — это один из самых мощных принципов юзабилити: когда вещи всегда ведут себя одинаково, пользователям не нужно беспокоиться о том, что произойдет. Вместо этого они знают, что произойдет, основываясь на предыдущем опыте. Каждый раз, когда вы отпускаете яблоко над сэром Исааком Ньютоном, оно падает на его голову. Это хорошо.
Чем больше ожидания пользователей окажутся правильными, тем больше они будут чувствовать себя в управлении системой и тем больше им понравится. И чем больше система нарушает ожидания пользователей, тем больше они будут чувствовать себя неуверенно. Ой, может быть, если я отпущу это яблоко, оно превратится в помидор и прыгнет на милю в небо.
9. Держите жаргон до минимума — Эрин Киссан
Слишком легко добавить несколько умных слов или щепотку жаргона в вашу копию пользовательского интерфейса. Почему? Потому что мы знаем, что означает этот бит жаргона. Однако мы можем оттолкнуть обычного пользователя, используя термины, которые они могут не знать. По этой причине веб-стратег Эрин Киссан советует нам свести жаргон к минимуму .
Есть время для профессионального жаргона: когда вы знаете, что разговариваете с аудиторией, которая вас понимает, и вам нужна дополнительная конкретность и точность, которую может обеспечить жаргон. Если вы используете его вне этой ситуации, вы, вероятно, не общаетесь четко, честно или эффективно.
Жаргон на самом деле не проблема здесь. Проблема с копией на этой странице — и многими другими, которые продвигают информационные продукты — в том, что она ничего не говорит. Неуместные жаргон, модные слова и другие виды пуха врываются, потому что отсутствие передаваемого значения создает вакуум.
10. Сделайте прототип вместо каркаса — Дэвид Верба
Когда дело доходит до создания нашего пользовательского интерфейса, многие разработчики начинают с того, как будет выглядеть сайт. Однако по мере того, как многофункциональные интернет-приложения (RIA), управляемые Ajax, становятся все более распространенными, не имеет особого смысла создавать динамичный, динамичный веб-сайт с простым каркасом. Иногда просто более эффективно создать прототип.
Технический директор Adaptive Path Дэвид Верба (David Verba) утверждает, что каркас может не подходить для разработки пользовательского интерфейса, так как он просто не подрезает горчицу, чтобы действительно реализовать сложное приложение.
Прототипирование позволяет нам видеть проблемы более четко — и часто раньше — в процессе проектирования и разработки. По мере того, как мы выходим за пределы сайтов с корпоративным контентом и переходим к приложениям, которые имеют богатую и сложную функциональность, наша способность сесть в начале проекта и предвидеть потенциальные взаимодействия и проблемы уменьшается. Проблемное пространство слишком сложное. Это причина, по которой мы начали использовать каркасы. Часто единственный способ по-настоящему понять, где возникнут проблемы или найти возможные решения, — это набросать их. Мы используем каркасы для создания эскизов контента и макета, но по мере продвижения к более интерактивным интерфейсам каркасы не так эффективны. Нам нужно набросать с реальной функциональностью — так сказать, набросать в коде — чтобы мы могли видеть, как приложение будет себя вести.
Вы можете прочитать больше советов по веб-разработке в его блоге Web Jackalope .