Введение
В современном мире миллиарды вычислительных устройств. Еще больше программ для них. И у каждой свой интерфейс, являющийся «рычагами» взаимодействия между пользователем и машинным кодом. Не удивительно, что чем лучше интерфейс, тем эффективнее взаимодействие.
Однако далеко не все разработчики и даже дизайнеры, задумываются о создании удобного и понятного графического интерфейса пользователя.
Для себя я начал с постановки вопросов: общие принципы, какие элементы интерфейса(ЭИ) создать, какой у них должен быть дизайн, где их правильно размещать и как они должны себя вести.
Ниже я постараюсь ответить на эти вопросы.
Общие принципы
- Интерфейс должен быть интуитивно понятным. Таким, чтобы пользователю не требовалось объяснять как им пользоваться.
- Для упрощения процесса изучения необходима справка. Буквально — графическая подсказка, объясняющая значение того или иного ЭИ. Полное руководство должно быть частью интерфейса, доступной в любой момент.
- Возвращайте пользователя в то место, где он закончил работу в прошлый раз. Зачем нажимать все заново?
- Чаще всего, пользователи в интерфейсе сначала ищут сущность(существительное), а затем действие(глагол) к ней. Следуйте правилу «существительное -> глагол». Например, шрифт -> изменить.
- Чем быстрее человек увидит результат — тем лучше. Пример — «живой» поиск, когда варианты, в процессе набора поискового запроса. Основной принцип: программа должна взаимодействовать с пользователем на основе наименьшей значимой единицы ввода.
- Используйте квазирежимы. Например, ввод заглавных букв с зажатой клавишей shift — это квазирежим. С включенным capslock — режим. Основное отличие в том, что человек может забыть в каком режиме он находится, а в квазирежиме(с зажатой доп. клавишей) это сделать гораздо сложнее.
- Следует с осторожностью предоставлять пользователю возможность, по установке личных настроек. Представьте, сколько времени потратит сотрудник настраивая Word, если его интерфейс был полностью переделан предыдущим.
- Чем больше пользователь работает с какой-то конкретной задачей, тем больше он на ней концентрируется и тем меньше перестает замечать подсказки и сообщения, выводимые программой. Чем более критической является задача, тем меньше вероятность того, что пользователь заметит предупреждения относительно тех или иных потенциально опасных действий.
Какие ЭИ создать?
- Разработка интерфейса обычно начинается с определения задачи или набора задач, для которых продукт предназначен
- Простое должно оставаться простым. Не усложняйте интерфейсы. Постоянно думайте о том, как сделать интерфейс проще и понятнее.
- Пользователи не задумываются над тем, как устроена программа. Все, что они видят — это интерфейс. Поэтому, с точки зрения потребителя именно интерфейс является конечным продуктом.
- Интерфейс должен быть ориентированным на человека, т.е. отвечать нуждам человека и учитывать его слабости. Нужно постоянно думать о том, с какими трудностями может столкнуться пользователь.
- Думайте о поведении и привычках пользователей. Не меняйте хорошо известные всем ЭИ на неожиданные, а новые делайте интуитивно понятными.
- Разрабатывайте интерфейс исходя из принципа наименьшего возможного количества действий со стороны пользователя.
Какой должен быть дизайн ЭИ?
На самом деле, дизайн ЭИ — тема отдельной статьи. Тут нужно учитывать все: начиная от цвета, формы, пропорций, заканчивая когнитивной психологией. Однако, несколько принципов все же стоит отметить:
- Цвет. Цвета делятся на теплые(желтый, оранжевый, красный), холодные(синий, зеленый), нейтральные(серый). Обычно для ЭИ используют теплые цвета. Это как раз связано с психологией восприятия. Стоит отметить, что мнение о цвете — очень субъективно и может меняться даже от настроения пользователя.
- Форма. В большинстве случаев — прямоугольник со скругленными углами. Или круг. Полностью прямоугольные ЭИ, лично мне нравятся меньше. Возможно из-за своей «остроты». Опять же, форма как и цвет достаточно субъективна.
- Основные ЭИ(часто используемые) должны быть выделены. Например размером или цветом.
- Иконки в программе должны быть очевидными. Если нет — подписывайте. Ведь, по сути дела, вместо того чтобы объяснять, пиктограммы зачастую сами требуют для себя объяснений.
- Старайтесь не делать слишком маленькие элементы — по ним очень трудно попасть.
Как правильно расположить ЭИ на экране?
- Есть утверждение, что визуальная привлекательность основана на пропорциях. Помните известное число 1.62? Это так называемый принцип Золотого сечения. Суть в том, что весь отрезок относится к большей его части так, как большая часть, относится к меньшей. Например, общая ширина сайта 900px, делим 900 на 1.62, получаем ~555px, это ширина блока с контентом. Теперь от 900 отнимаем 555 и получаем 345px. Это ширина меньшей части:
- Перед расположением, ЭИ следует упорядочить(сгруппировать) по значимости. Т.е. определить, какие наиболее важны, а какие — менее.
- Обычно(но не обязательно), элементы размещаются в следующей градации: слева направо, сверху вниз. Слева в верху самые значимые элементы, справа внизу — менее. Это связано с порядком чтения текста. В случае с сенсорными экранами, самые важные элементы, располагаются в области действия больших пальцев рук.
- Необходимо учитывать привычки пользователя. Например, если в Windows кнопка закрыть находится в правом верхнем углу, то программе аналогичную кнопку необходимо расположить там же. Т.е. интерфейс должен иметь как можно больше аналогий, с известными пользователю вещами.
- Размещайте ЭИ поближе там, где большую часть времени находится курсор пользователя. Что бы ему не пришлось перемещать курсор, например, от одного конца экрана к другому.
- Соблюдайте пропорции
- Элемент интерфейса можно считать видимым, если он либо в данный момент доступен для органов восприятия человека, либо он был настолько недавно воспринят, что еще не успел выйти из кратковременной памяти. Для нормальной работы интерфейса, должны быть видимы только необходимые вещи — те, что идентифицируют части работающих систем, и те, что отображают способ, которым пользователь может взаимодействовать с устройством.
- Делайте отступы между ЭИ равными или кратными друг-другу.
Как ЭИ должны себя вести?
- Пользователи привыкают. Например, при удалении файла, появляется окно с подтверждением: «Да» или «Нет». Со временем, пользователь перестает читать предупреждение и по привычке нажимает «Да». Поэтому диалоговое окно, которое было призвано обеспечить безопасность, абсолютно не выполняет своей роли. Следовательно, необходимо дать пользователю возможность отменять, сделанные им действия.
- Если вы даете пользователю информацию, которую он должен куда-то ввести или как-то обработать, то информация должна оставаться на экране до того момента, пока человек ее не обработает. Иначе он может просто забыть.
- Избегайте двусмысленности. Например, на фонарике есть одна кнопка. По нажатию фонарик включается, нажали еще раз — выключился. Если в фонарике перегорела лампочка, то при нажатии на кнопку не понятно, включаем мы его или нет. Поэтому, вместо одной кнопки выключателя, лучше использовать переключатель(например, checkbox с двумя позициями: «вкл.» и «выкл.»). За исключением случаев, когда состояние задачи, очевидно.
Такой переключатель напрямую отражает состояние ЭИ - Делайте монотонные интерфейсы. Монотонный интерфейс — это интерфейс, в котором какое-то действие, можно сделать только одним способом. Такой подход обеспечит быструю привыкаемость к программе и автоматизацию действий.
- Не стоит делать адаптивные интерфейсы, которые изменяются со временем. Так как для выполнения какой-то задачи, лучше изучать только один интерфейс, а не несколько. Пример — стартовая страница браузера Chrome.
- Если задержки в процессе выполнения программы неизбежны или действие производимое пользователем очень значимо, важно, чтобы в интерфейсе была предусмотрена сообщающая о них обратная связь. Например, можно использовать индикатор хода выполнения задачи (status bar).
- ЭИ должны отвечать. Если пользователь произвел клик, то ЭИ должен как-то отозваться, чтобы человек понял, что клик произошел.
В заключении
Эта статья не претендует на самый полный справочник принципов проектирования интерфейса. Графический интерфейс пользователя — это обширная тема, тесно переплетенная с психологией, занимающая умы ученых и сотни страниц книг и исследований. В столь малом формате, никак не выразить всю полноту затронутой темы. Однако, соблюдение базовых принципов, позволит строить интерфейсы более дружелюбными к пользователю, а так же упростить сам процесс проектирования.
Спасибо за внимание.
Литература
Джеф Раскин, «Интерфейс: новые направления в проектировании компьютерных систем»
Алан Купер, «Об интерфейсе. Основы проектирования взаимодействия»
Алан Купер, «Психбольница в руках пациентов»
Аннотация: рассматриваются основные факторы удобства использования ПО, а также психо-физиологические особенности человека, делающие предметы удобными и неудобными для него. Рассказывается о методике проектирования, ориентированного на удобство использования.
Удобство использования программного обеспечения
Одним из важных показателей качества программного обеспечения является удобство его использования. Оно описывается с помощью таких характеристик, как понятность пользовательского интерфейса, легкость обучения работе с ним, трудоемкость решения определенных задач с его помощью, производительность работы пользователя с ПО, частота появления ошибок и жалоб на неудобства. Для построения действительно удобных программ нужен учет контекста их использования, психологии пользователей, необходимости помогать начинающим пользователям и предоставлять все нужное для работы опытных. Однако самым значимым фактором является то, помогает ли данная программа решать действительно значимые для пользователей задачи.
Многие программисты имеют технический или математический склад ума. Для таких людей «понятность», «легкость обучения» представляются весьма субъективными факторами. Сами они достаточно легко воспринимают сложные вещи, если те представлены в рамках непротиворечивой системы понятий, как бы дико эта система и входящие в нее понятия ни выглядели для постороннего наблюдателя. Такие люди чаще всего изучают новое ПО при помощи документации и искренне убеждены в том, что пользователи будут разбираться с написанной ими программой тем же способом. Типичный подход программиста при разработке пользовательского интерфейса — предоставить пользователю те же рычаги и кнопки, с помощью которых программист сам хотел бы управлять своей программой.
К пользователям, у которых возникли проблемы с программой, многие программисты достаточно суровы. Любимый их ответ в такой ситуации — «RTFM!» (read this fucking manual, прочти эту чертову инструкцию). Они любят рассказывать друг другу анекдоты о «ламерах», которые не в силах понять, что файлы нужно сохранять.
Посмотрим теперь, что будет с «обычным человеком», впервые попытавшимся воспользоваться компьютером вообще и текстовым редактором в частности (как ни тяжело представить такое сейчас).
Пользователь открывает редактор, скажем, Microsoft Word, как-то набирает текст, затем печатает его на принтере и выключает компьютер. Когда он включает компьютер в следующий раз и не находит важный документ, который он набрал (вы же сами помните!), он страшно раздосадован. Что вы говорите? Надо было сохранить документ? Что значит «сохранить»? Куда? Он же набрал документ и своими глазами видел, что «тот в компьютере есть». Зачем его еще как-то «сохранять»? Ну ладно, ну хорошо, раз вы так уверяете, что нужно нажать эту кнопочку, он будет ее нажимать. Да-да, каждые 10 минут, специально для вас, он будет нажимать эту кнопочку (зачем она нужна?…). Конечно же, спустя некоторое время он забудет это сделать.
Человек «понимает» смысл и назначение вещей и действий с ними, только если они в его сознании находятся в рамках некоторой системы связанных друг с другом понятий. Набор текста на компьютере больше всего напоминает набор текста на печатной машинке (и специально сделан выглядящим так в редакторах WYSIWYG), чуть менее он близок к письму. В обоих этих случаях, написав или напечатав некоторый текст на листе бумаги, мы получим достаточно долго хранящийся документ. Чтобы избавиться от него, нужно предпринимать специальные действия — смять, порвать, пролить на него кофе, выкинуть в мусорную корзину. Если такой документ пропадает без наших действий, значит кто-то (сотрудник, начальник, жена, ребенок или уборщица) взял его. Человек, только что столкнувшийся с электронными документами, воспринимает их как аналоги бумажных и ожидает от них тех же свойств.
Документы «в компьютере» не такие. У компьютера есть два вида памяти — оперативная, или временная, и постоянная. В большинстве случаев набранный в редакторе текст находится в оперативной памяти, содержимое которой пропадает при отключении питания. Чтобы текст смог «пережить» это отключение, он должен быть перемещен в постоянную память. Именно для этого служит операция «сохранить документ».
В предыдущем абзаце описана некоторая система понятий, непривычная для новичка и не доступная с помощью непосредственного созерцания компьютера и размышлений. Ее необходимо как-то передать новому пользователю, иначе он не сможет понять, зачем же сохранять уже написанные документы, ведь они и так есть. Иначе, максимум, что он сможет сделать — выучить ритуал, согласно которому нужно иногда нажимать на кнопку «Сохранить». Очень многие люди работают с компьютерами и другой сложной техникой с помощью ритуалов, поскольку не всегда в силах разобраться в новой для них системе понятий, в рамках которой действует эта техника. Но гораздо чаще — потому, что ее производитель и разработчики не тратят столько усилий, сколько нужно, чтобы научить этой системе каждого пользователя.
Если же подпускать пользователей к компьютеру только после прочтения необходимой документации и усвоения ее информации, редко кто из них вообще заинтересуется использованием компьютера. Они используют компьютер и программное обеспечение только как инструменты для решения своих задач (единственный вид программ, где можно хоть как-то рассчитывать на чтение документации, — игры и развлечения), и им не хочется тратить время на чтение инструкций и осмысление правил, не относящихся напрямую к их области деятельности. Почему бы этим программам не быть столь же наглядными, как молоток и отвертка — никто не станет же всерьез читать инструкцию к отвертке?
Можно поспорить с этим на том основании, что компьютер и ПО намного сложнее отвертки — с их помощью можно выполнять гораздо больше действий и сами действия гораздо сложнее. Но, с другой стороны, умеют же сейчас делать автомобили, для вождения которых нужно знать только правила движения и основные элементы управления, а если что-то идет не так — пусть разбираются автослесари. Автомобиль сравним по сложности с самыми сложными программами, а то и превосходит их. И многие водители (по крайней мере, на Западе), используют автомобили, ничего не понимая в их устройстве. Пользователи изначально не хотят читать инструкции и не будут этого делать, пока эти инструкции занимают сотни страниц, написаны непонятным и сухим языком, требуют внимательности и обдумывания, не отвечают сразу на вопросы, которые интересуют пользователя в данный момент, а также пока начальство не скажет, что инструкцию все-таки прочитать надо. Но ведь есть еще и естественная человеческая забывчивость…
Удобство обычной, «некомпьютерной» модели работы с документами подтверждается тем, что Palm Pilot, первый компьютер без разделения памяти на временную и постоянную, разошелся небывалым для такого устройства тиражом — за первые два года было продано около 2 миллионов экземпляров.
Все сказанное выше служит иллюстрацией того факта, что «простота» и «легкость обучения» все-таки не совсем субъективны, а имеют объективные составляющие, которые необходимо учитывать при разработке части программного обеспечения, предназначенной для непосредственного взаимодействия с человеком — пользовательского интерфейса. Если посмотреть внимательнее, непонимание программистами пользователей в большой степени вызвано их, программистов, собственной ленью и нежеланием задумываться над непривычными вещами.
Рис.
9.1.
Что это? Лень или ошибка программиста, использовавшего не то стандартное окно Windows? А что делать пользователю, получившему такое сообщение?
Материал, который я собираюсь изложить — это обобщение книги Джефа Раскина, дополненное некоторыми рассуждениями на основе собственного опыта. Первый пост в этой серии — «Вступление» — находится здесь.
В первой части описаны особенности человеческого восприятия, важные для проектирования интерфейса, а также принципы построения интерфейса.
1. Особенности человеческого восприятия
1.1. Локус внимания
В любой момент времени человек может сосредоточить свое внимание только на одном предмете. Это может быть какой-то объект реального мира (например, лист бумаги) определенная область экрана или окна, а может и какой-нибудь процесс «в уме» (например, когда человек обдумывает свои действия или что-то рассчитывает). Предмет, на котором сосредоточено внимание человека, будем называть локусом его внимания. С локусом внимания связано как минимум две особенности человеческого восприятия.
1. При периодическом переключении внимания, например, с рабочей области документа на уведомления об ошибках, эффективность работы снижается. Это связано с тем, что при смене локуса теряется связанная с ним «оперативная» информация, которая содержится в кратковременной памяти. Соответственно, при возвращении к прежнему локусу эту информацию необходимо каким-то образом восстанавливать.
2. При пристальном сосредоточении внимания все события вне локуса могут игнорироваться или просто оставаться незамеченными.
1.2. Формирование привычек
При совершении некоторых действий раз за разом человек перестает уделять внимание их выполнению — действия совершаются неосознанно. Таким образом, у человека формируются привычки — полезные навыки, позволяющие быстрее выполнять рутинные операции. Интерфейс может как способствовать вырабатыванию привычек, так и препятствовать этому — в зависимости от того, могут ли в нем рутинные действия выполняться единообразно.
Привычка может оказаться и вредной. Типичный пример — подтверждение выполнения команды в диалоговом окне. Если диалоговое окно возникает каждый раз при выполнении рутинных операций, то в конце концов человек перестает читать текст в этом окне (и это справедливо не только для таких «классических» пользователей как бухгалтеры или секретарши, но и для самих программистов). Поэтому если похожее окно возникнет, когда пользователь отдал команду по ошибке, то он, не задумываясь, подтвердит команду, потому что это вошло у него в привычку. Это может иметь печальные последствия, если команда была необратимой и привела к уничтожению важных данных. Хочу подчеркнуть, что приведенный пример вреда от привычки является проблемой не пользователя, а самого интерфейса. Одним из способов избежать подобных проблем является обеспечение обратимости команд везде, где это только возможно.
1.3. Промлема модальности
Существенным препятствием для формирования у пользователя привычек при работе с интерфейсом является наличие в интерфейсе нескольких режимов. Режимы — это состояния интерфейса, в которых один и тот же жест пользователя интерпретируется по-разному. Жестом может являться набор слова, нажатия определенного сочетания клавиш (например, Ctrl-S) или кнопки мыши, даже движение мышью и т.п. Модальность является также серьезным источником ошибок при взаимодействии с программой. Даже изменение состояния объекта (например, с включенного на отключенное), выполняемое одним и тем же жестом, является модальным, поскольку для выполнения желаемого действия («включить», «отключить») необходимо знать и держать в локусе внимания текущее состояние объекта. Как было сказано в подразделе 1.1, если внимание человека сосредоточено на чем-то другом, то информация о состояниянии объекта может быть проигнорирована, что повлечет за собой ошибки.
К счастью, модальности интерфейса не возникает в двух случаях.
1. В случае, если контекст, в котором выполняется жест, находится в локусе внимания пользователя. Например, нажатие клавиши Backspace при наборе текста можно было бы считать модальным, поскольку результат этого жеста зависит от того, какая буква находится перед курсором. Однако, данная буква находится в локусе внимания, поскольку именно ее пользователь хочет удалить при нажатии Backspace. Клавиша Caps Lock, напротив, во многих случаях является модальной, т.к. сохраняет свой эффект — изменение регистра букв — и после того, как локус внимания пользователя сместился с набора нужного слова в верхнем регистре на другие операции.
2. Если при выполнении жеста дополнительно удерживается какая-либо клавиша или несколько (например, Ctrl или Ctrl + Alt). Фактически, такой жест воспринимается как новый, поэтому не конфликтует с другими. Раскин называет подобную модификацию «квазирежимом».
2. Принципы построения интерфейсов
2.1. Отсутствие модальности
Поскольку модальность приводит к ошибкам взаимодействия с программой, хорошим принципом создания интерфейсов является исключение модальности. Один из способов достичь этого — использование «квазирежимов» (см. также подраздел 1.3).
2.2. Сохранность пользовательских данных
Назначением большинства программ в конечном итоге является (должно являться) упрощение работы, выполняемой человеком. Пользовательские данные — это результат работы человека. Если этот результат будет утерян, работу придется выполнять снова, что нельзя назвать упрощением. Поэтому любая программа должна обеспечивать сохранность данных пользователя, будь то простое текстовое сообщение, 3D-модель или научная статья. О важности данных может судить только сам пользователь, но никак не программа, с которой он взаимодействует. Путей для обеспечения сохранности данных может быть много: это и автоматическое сохранение любых изменений, и обратимость операций, и создание резервного архива (backup).
2.3. Формирование команд по принципу «объект -> действие»
При формировании многих команд может применяться одна из двух моделей:
1. Сначала указать объект, а затем действие, которое необходимо совершить с этим объектом (модель «объект-действие»).
2. Сначала указать действие, а затем объект, к которому следует применить это действие (модель «действие-объект»).
Предпочтительной является первая модель — «объект-действие». Во-первых, она исключает многие модальные ошибки, поскольку переключение действия обычно сопровождается переключением режимов работы. Во-вторых, она проще для восприятия человеком, поскольку, как правило, локус внимания пользователя уже находится на объекте, когда возникает необходимость выполнить какое-то действие с этим объектом.
Использование второй модели — «действие-объект» — тоже допустимо, но только в тех случаях, когда ее применение достаточно аргументировано.
2.4. Монотонность
Привычки могут формироваться у человека лишь в том случае, если каждое действие можно выполнить всегда одним и тем же образом. Интерфейс можно назвать монотонным, когда каждое элементарное действие в нем можно выполнить ровно одним способом (т.е. жестом). Часто для одного и того же действия предусматривается несколько способов выполнения: через меню, сочетанием клавиш, щелчком мыши и т.п. Однако подобная практика затрудняет формирование привычек, поскольку пользователь должен каждый раз выбирать, каким способом выполнить действие. И лишь когда он станет выполнять действие всегда только одним способом, т.е. сам сведет немонотонный интерфейс к монотонному, у него появится возможность формировать привычку для выполнения этого действия. Если сразу спроектировать интерфейс так, чтобы он был монотонным, то это сократит время обучения пользователя. Исключение, вероятно, может составлять случай, когда проектируется интерфейс для пользователей с разными устройствами. Например, часть пользователей пользуется настольным ПК с клавиатурой и мышью, а часть — планшетным ПК с сенсорным экраном. Однако и в этом случае стоит подумать о других альтернативах, например, нахождении способа взаимодействия, который будет применим на разных устройствах, или разработке разных версий интерфейса для разных устройств. Иначе есть риск создать интерфейс, который не будет устраивать ни ту, ни другую группу пользователей.
2.5. Видимость
Интерфейс программы должен своевременно информировать пользователя о:
1) текущем состоянии системы и смене состояния в результате действий пользователя;
2) способах управления и воздействия на систему.
В случае отсутствия информации о состоянии системы возрастает количество ошибок, допускаемых при работе с программой. Информирование пользователя о состоянии системы включает в том числе и предоставление различного рода обратной связи: подсветку объекта, на который наведен указатель мыши, индикацию о том, что действие пользователя воспринято программой и находится в обработке и т.п.
В случае, когда отсутствует видимая информация о способах воздействия на систему, человеку приходится выполнять лишнюю работу, связанную с получением этой информации, что вряд ли способствует концентрации на собственных задачах. Элемент управления можно считать видимым, если он непосредственно доступен для восприятия или был воспринят настолько недавно, что еще не успел выйти из кратковременной памяти. При этом элемент должен быть не просто виден в принципе, но виден там, где его ожидает увидеть пользователь, вероятнее всего — в локусе внимания.
Можно предположить, что именно по причине видимости графические интерфейсы стали гораздо популярнее консольных. Хотя последние могут быть вполне удобны для работы, но «порог вхождения» для них гораздо выше.
2.6. Состоятельность
Элемент управления является не только видимым, но и состоятельным, если по одному его виду пользователь может определить, как именно с ним взаимодействовать: кнопки — нажимать, полосы прокрутки — перемещать, и т.п. Таким образом, принцип состоятельности дополняет принцип видимости.
Взаимодействие с подобными по виду элементами и объектами должно происходить всегда единообразно, иначе будут возникать ошибки, связанные с модальностью интерфейса. Примером может являться интерфейс, в котором в одной ситуации элемент, выглядящий как кнопка, необходимо нажать, а в другой ситуации элемент, выглядящий подобным образом, необходимо переместить.
Мы продолжаем писать про проектирование сайтов и разработку интерфейсов. На этот раз выделили сразу 19 принципов построения интерфейсов. Эти принципы мы по крупицам собирали на протяжении последних 3х лет работы из разных книг, статей, исследований и, конечно, собственного опыта разработки интерфейсов.
Создание интерфейсов в проектировании больших сайтов – это самый объемный и один из самых важных этапов. Поэтому я отдельно решил выделить принципы и законы проектирования интерфейсов.
- Принцип KISS. От англ. «keep it short and simple». Интерфейс должен быть простой и понятный, задачи должны решаться минимальным числом действий, все должно быть понятно и очевидно.
- Не заставляйте думать. Нужно избегать сложных действий, которые заставляют пользователей думать.
- Убираем очевидное. Не стоит показывать очевидные элементы интерфейса, нужно сосредоточиться только на действительно необходимых вещах.
- Соотношение сигнал / шум. В каждом интерфейсе есть важные элементы (сигналы) и маловажные или даже бессмысленные для определенной части системы (шум), естественно, нужно концентрироваться на сигналах и избегать шума.
- Проверенное лучше модного. Не стоит цепляться за моду и делать что-то только потому, что так делают другие, лучше отдать предпочтение проверенным элементам интерфейса.
- Привычные элементы управления. В любом современном интерфейсе есть много элементов управления, будет лучше использовать привычные элементы и визуальные образы.
- Люди не читают, люди просматривают. Пользователи не любят читать большие массивы текстов, не заставляйте их это делать.
- Принцип умного заимствования. Не стоит изобретать велосипед для стандартных вещей.
- Кошелек Миллера. В одном функциональном блоке не может быть больше 5-7 элементов, иначе пользователь не сможет удерживать информацию в кратковременной памяти.
- Принцип группировки. Информацию на странице желательно разбивать на логические блоки (группы), так пользователю легче ориентироваться.
- Интуитивная понятность. Понимание лучше запоминания.
- Все полезное на виду. Все важные элементы интерфейса должны быть на виду и соответствующим образом выделены.
- Принцип 3х кликов. Должно быть не более 3х кликов для перехода из одного раздела в другой. Это же правило применимо к главной странице: любая важная информация должна быть доступна не более чем в 3 клика.
- Однородность. В больших проектах часто встречается однородный функционал в разных частях сайта (например, комментарии), он не должен отличаться. Это же касается и стиля.
- Способы решения задачи. Пользователям нужно предлагать способы решения их задач с помощью интерфейса, и эти способы должны быть очевидны.
- Принцип мостовых перил. Этот принцип еще называют «защита от дурака», пользователей нужно защищать от случайных действий.
- Правильный копирайтинг. Проектирование интерфейса – это во многом копирайтинг, важна каждая буква, особенно заголовки.
- Принцип единства. Настройки и элементы управления нужно стараться не прятать в отдельные разделы, а дать возможность управлять из одного места, если это уместно.
- Тренды. Стоит учитывать современные тенденции, чтобы интерфейс не устарел еще до выхода проекта, но подходить к этому вдумчиво.
P.S. Чтобы получать наши новые статьи раньше других или просто не пропустить новые публикации — подписывайтесь на нас в Facebook, VK, Twitter
P.P.S. Совсем скоро в нашей бизнес-школе Digitov стартует курс: Проектирование серьезных сайтов. Подписывайтесь на курс сейчас и сможете купить его со скидкой.
Оригинал статьи тут: http://seclgroup.ru/article-user-interface-architecture-principles.html
Автор:
Никита Семенов (Facebook, VK, LinkedIn)
CEO
Компания «SECL GROUP» / «Internet Sales Technologies»
«Разрабатывать дизайн означает нечто большее, нежели просто собирать, упорядочивать или даже редактировать; это значит придавать ценность и значимость, очерчивать, упрощать, прояснять, видоизменять, возвеличивать, сгущать краски, убеждать и, возможно, даже развлекать.»
— Пол Рэнд
Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →
Интерфейсы существуют для инициации взаимодействия
Интерфейсы служат для осуществления взаимодействия между людьми и окружающим миром. Они помогают разъяснять и освещать, инициировать и демонстрировать взаимоотношения, объединять нас и разлучать, они управляют нашими ожиданиями и предоставляют доступ к функциям. Процесс разработки интерфейсов отнюдь не искусство, ибо они не являются чем-то монументальным. Интерфейсы служат определенной цели, их эффективность может быть точно определена. Однако, они не утилитарны. Лучшие интерфейсы способны вдохновлять, пробуждать, мистифицировать и усиливать наше взаимодействие с миром.
Ясность — задача №1
Ясность – это первая и главнейшая цель любого интерфейса. Для того, чтобы эффективно использовать разработанный вами интерфейс, люди должны легко выявлять его, осознавать, зачем они его используют, понимать, взаимодействие с каким объектом он обеспечивает, представлять, что произойдет при его использовании и, наконец, быть способны взаимодействовать с ним.
Хотя при знакомстве с интерфейсом всегда присутствует некая загадка и ожидание, в нем не должно быть места замешательству. Ясность усиливает доверие пользователя и способствует дальнейшему взаимодействию. Лучше сотня понятных экранов, чем один сбивающий с толку.
Любой ценой удерживайте внимание
Мы живем в мире раздражителей. В наше время сложно погрузиться в чтение – что-то постоянно отвлекает нас и пытается привлечь к себе внимание. А оно бесценно. Не перегружайте боковые панели вашего приложения раздражающими материалами, помните, для чего предназначен экран в первую очередь. Если кто-то читает – дайте ему дочитать до конца, прежде чем показывать рекламу (если без этого нельзя). Уважайте внимание и тогда не только ваши читатели станут счастливее, но и улучшатся ваши показатели. Когда главная цель – побудить к взаимодействию, внимание становится обязательным требованием. Удерживайте его любой ценой.
Дайте пользователям контроль
Люди наиболее расслаблены, когда уверены, что контролируют себя и собственное окружение. Бездумные программы отнимают у них это ощущение уюта, принуждая к незапланированным взаимодействиям и вводя в замешательство запутанной навигацией и неожиданными результатами.
Держите пользователей у руля, регулярно демонстрируя им состояние системы, описывая возможные результаты (если вы сделаете то-то, произойдет то-то) и намекая, чего следует ждать во время следующего шага. Не бойтесь сообщать очевидное… ведь оно почти никогда таковым не является.
Прямое взаимодействие является наилучшим
Лучший интерфейс – это его отсутствие, аналогичное нашему миру, где мы способны манипулировать физическими объектами напрямую. Так как это возможно далеко не всегда вследствие растущей информационной насыщенности объектов, мы создаем интерфейсы, дабы облегчить взаимодействие с ними. Очень легко увлечься и добавить слоев больше, чем требуется. Так появляются безумно вычурные кнопки, хромирование, графика, опции, настройки, окна, дополнения и прочая мишура и вот мы уже обнаруживаем себя манипулирующими элементами интерфейса, а не чем-то важным. Откажитесь от этого, стремитесь к изначальной цели прямого управления… к созданию интерфейса с наименьшим весом, способным воспринимать наибольшее количество простых человеческих жестов. В идеале интерфейс должен быть настолько легким, чтобы у пользователя создавалось ощущение прямого взаимодействия с целевыми объектами.
Одно основное действие на экран
Каждый из проектируемых нами экранов должен быть предназначен лишь для одного действия пользователя. Это делает интерфейс легким в изучении, использовании, а также обслуживании и доработке в случае необходимости. Экран, предназначенный для двух и более основных операций, легко приводит в замешательство. Как статья нуждается в одном ключевом тезисе, также и каждый экран, создаваемый нами, должен служить одному ключевому действию, являющемуся его raison d’etre.
Оставляйте второстепенные действия на втором плане
Экраны с одним ключевым действием могут поддерживать несколько второстепенных, но держите их в стороне! Ваша статья существует не для того, чтобы люди могли поделиться ею в Twitter’е… она нужна для того, чтобы люди могли прочитать и понять ее. Держите второстепенные действия на втором плане, делая их менее заметными или демонстрируя после выполнения ключевой задачи.
Делайте следующий шаг естественным
Очень немногие действия должны выполняться в последнюю очередь, так что позаботьтесь о пошаговом переходе пользователя от одного этапа к другому. Старайтесь предвидеть следующее движение пользователя и поддержать его дизайном. Именно это нам и нравится в человеческом общении – открытость для дальнейшего взаимодействия. Не оставляйте пользователей в подвешенном состоянии после того, как они выполнят необходимые вам действия… предоставьте им возможность сделать следующий шаг и продолжить взаимодействие для достижения своих целей.
Функциональность важнее внешности (действие важнее формы)
Люди наиболее комфортно ощущают себя в окружении объектов, поведение которых они способны предсказать – других людей, животных, вещей, программ. Когда кто-то или что-то действует ожидаемым нами образом, мы испытываем к нему расположение. А теперь к делу – внешний вид элементов дизайна должен соответствовать их функциям. На практике это означает, что любой пользователь должен понимать, как действует тот или иной элемент интерфейса, просто взглянув на него. Если что-то выглядит как кнопка, оно должно действовать как кнопка. Не играйте с базовым взаимодействием… приберегите свою фантазию для задач более высокого уровня.
Как обеспечить идеальное сочетание креатива и функциональности, чтобы сайт был и визуально приятен пользователям и при этом эффективно выполнял поставленные перед бизнесом задачи? Простого ответа на этот вопрос нет. Это настоящее мастерство, которого дизайнеры достигают годами. Где таких найти? Например, в рейтинге креативности веб-студий.
Рейтинг представляет собой топ-100 из самых креативных команд России, Украины и Беларуси, а также подрейтинги относительно побед, одержанных в каком-либо конкретном конкурсе из шести: «Рейтинг Рунета», «Золотой сайт», Webby Awards, CSS Design Awards, Awwwards и FWA.
Согласованность имеет значение
В дополнение к предыдущему принципу стоит отметить, что экранные элементы не должны выглядеть согласованно, за исключением случаев, когда они предназначены для согласованных действий. Элементы действующие одинаково должны и выглядеть одинаково. Это равно справедливо и для непохожих элементов, для которых очень важно выглядеть по-разному (не согласованно). Для обеспечения согласованности многие начинающие дизайнеры часто скрывают важные различия, используя однородный визуальный подход (и, нередко, повторяющийся код) в то время как визуальные различия вполне допустимы.
Сильная визуальная иерархия – лучший вариант
Сильная визуальная иерархия формируется при образовании зрительно упорядоченного образа видимых элементов на экране. То есть тогда, когда пользователи постоянно наблюдают одни и те же объекты в одном и том же порядке. Слабая визуальная иерархия не позволяет глазам зрителя отдыхать и, в конечном счете, создает ощущение запутанности и громоздкости. В быстро меняющемся окружении очень сложно обеспечить сильную визуальную иерархию по причине относительности зрительной нагрузки: когда весь текст выделен полужирным, в нем не выделено ни единого слова. Один единственный визуально тяжелый элемент, добавленный на экран, может полностью нарушить иерархию и заставить дизайнера пересмотреть вес каждого из объектов. Большинство людей не замечает визуальную иерархию, но она является одним из простейших способов усиления (или ослабления) дизайна.
Продуманная организация снижает когнитивную нагрузку
Как сказал Джон Маэда в своей книге Simplicity, продуманно расположенные на экране элементы могут заставить большое казаться малым. Демонстрация контента в его логической взаимосвязи помогает людям быстрее и легче воспринимать ваш интерфейс. Группируйте схожие элементы, показывайте их взаимосвязь с помощью их локации и взаиморасположения. Организовав свой контент с умом, вы снизите когнитивную нагрузку, оказываемую им на пользователя… которому не придется думать над тем, как соотносятся элементы интерфейса – ведь вы уже сделали это за него. Не вынуждайте пользователя размышлять над взаимосвязями… продемонстрируйте их ему на экране.
Непредопределенное выделение цветом
Цвета физических объектов меняются при изменении освещения. В ясный день мы видим дерево, сильно отличающееся от того, что предстает перед нами в свете заходящего солнца. Как и в физическом мире, где цвет является понятием относительным, в интерфейсе он также не должен быть чем-то определенным. Он может помогать, использоваться при выделении, для привлечения внимания, но не должен становиться единственной определяющей чертой. Для экранов предназначенных для долгого чтения или продолжительной работы используйте приглушенные фоновые тона, а более яркие приберегите для расстановки акцентов. Разумеется, временами для заднего фона нужны кричащие цвета, однако, убедитесь прежде, что такое настроение соответствует вашей аудитории.
Прогрессивное раскрытие
На каждом из экранов показывайте лишь то, что требуется. Если люди делают выбор, предоставьте им достаточно информации для принятия решения, а в тему углубляйтесь уже на следующем экране. Избегайте лишних объяснений и показа всего за раз. Если это возможно, растягивайте принятие решений на несколько экранов, раскрывая информацию по мере необходимости. Это сделает взаимодействия более ясными.
Помогайте людям на лету
Идеальный интерфейс не требует подсказок, потому что он легок в изучении и использовании. На более низком уровне, в реальности, подсказки должны быть встроенными и контекстными, доступными лишь в определенном месте, в необходимый момент, скрытые от взоров на протяжении всего остального времени. Прося людей отправиться в раздел помощи и найти ответ на интересующий их вопрос там, вы взваливаете на них необходимость знать всё. Вместо этого встройте подсказки там, где это необходимо… только убедитесь, чтобы они не попадались на глаза тем, кто уже знает, как пользоваться вашим интерфейсом.
Решающий момент: точка входа
Первое знакомство с интерфейсом – момент критический, и, в то же время, дизайнеры о нем очень часто забывают. Для того, чтобы помочь нашим пользователям максимально быстро освоиться с интерфейсом, разрабатывать дизайн нужно с учетом точки входа – момента, когда еще ничего не произошло. И точкой этой не должна быть пустая страница… она должна указывать направление движения, помогать в освоении. Большинство проблем взаимодействия возникает в контексте начала работы… поняв правила, пользователи быстрее добьются успеха.
Важнее всего существующие проблемы
Люди ищут решения уже имеющихся проблем, а не потенциальных или грядущих. А потому, избегайте создавать интерфейсы, рассчитанные на преодоление гипотетических трудностей — изучайте поведение активных пользователей и работайте над решением существующих проблем. Это не такое увлекательное занятие как разглядывание облаков, однако, гораздо более полезное, ведь люди на самом деле начнут пользоваться вашим интерфейсом.
Лучший дизайн незаметен
Занятной чертой великолепного дизайна является то, что люди его обычно не замечают. Одна из причин этого в том, что успешный дизайн позволяет пользователю полностью сосредоточиться на выполнении своей задачи… завершив ее выполнение, он чувствует себя удовлетворенным и не склонен рефлектировать. Для дизайнера это может быть тяжким испытанием… ведь мы получаем меньше отзывов, если проект удается. Но хорошие разработчики всегда довольны удобным дизайном… и знают, что счастливые пользователи часто молчат.
Развивайте навыки в других дисциплинах
Визуальный и графический дизайн, типографика, копирайтинг, информационная архитектура и теория визуализации… все эти дисциплины являются частью дизайна интерфейсов. Их можно изучать поверхностно или специализироваться. Но не увлекайтесь отдельными из них и не упускайте из виду ни одной: берите из каждой ровно столько, сколько нужно для работы и двигайтесь вперед. Черпайте вдохновение в других дисциплинах, которые, как может показаться, не имеют никакого отношения к дизайну… что полезного мы можем почерпнуть из программирования, издательского, переплетного и пожарного дела, скейтбординга или карате?
Интерфейсы существуют, чтобы ими пользовались
Как и большинство других дизайнерских дисциплин, дизайн интерфейса успешен, когда люди пользуются плодами ваших усилий. Как красивый стул, на котором невозможно сидеть, проект проваливается, если люди не хотят им пользоваться. Таким образом, дизайн интерфейсов может рассматриваться не только как создание среды взаимодействия, но и как разработка объекта использования. Самого интерфейса недостаточно для удовлетворения Эго дизайнера – им должны пользоваться!
Оригинал статьи: http://bokardo.com/principles-of-user-interface-design/
Аннотация: рассматриваются основные факторы удобства использования ПО, а также психо-физиологические особенности человека, делающие предметы удобными и неудобными для него. Рассказывается о методике проектирования, ориентированного на удобство использования.
Удобство использования программного обеспечения
Одним из важных показателей качества программного обеспечения является удобство его использования. Оно описывается с помощью таких характеристик, как понятность пользовательского интерфейса, легкость обучения работе с ним, трудоемкость решения определенных задач с его помощью, производительность работы пользователя с ПО, частота появления ошибок и жалоб на неудобства. Для построения действительно удобных программ нужен учет контекста их использования, психологии пользователей, необходимости помогать начинающим пользователям и предоставлять все нужное для работы опытных. Однако самым значимым фактором является то, помогает ли данная программа решать действительно значимые для пользователей задачи.
Многие программисты имеют технический или математический склад ума. Для таких людей «понятность», «легкость обучения» представляются весьма субъективными факторами. Сами они достаточно легко воспринимают сложные вещи, если те представлены в рамках непротиворечивой системы понятий, как бы дико эта система и входящие в нее понятия ни выглядели для постороннего наблюдателя. Такие люди чаще всего изучают новое ПО при помощи документации и искренне убеждены в том, что пользователи будут разбираться с написанной ими программой тем же способом. Типичный подход программиста при разработке пользовательского интерфейса — предоставить пользователю те же рычаги и кнопки, с помощью которых программист сам хотел бы управлять своей программой.
К пользователям, у которых возникли проблемы с программой, многие программисты достаточно суровы. Любимый их ответ в такой ситуации — «RTFM!» (read this fucking manual, прочти эту чертову инструкцию). Они любят рассказывать друг другу анекдоты о «ламерах», которые не в силах понять, что файлы нужно сохранять.
Посмотрим теперь, что будет с «обычным человеком», впервые попытавшимся воспользоваться компьютером вообще и текстовым редактором в частности (как ни тяжело представить такое сейчас).
Пользователь открывает редактор, скажем, Microsoft Word, как-то набирает текст, затем печатает его на принтере и выключает компьютер. Когда он включает компьютер в следующий раз и не находит важный документ, который он набрал (вы же сами помните!), он страшно раздосадован. Что вы говорите? Надо было сохранить документ? Что значит «сохранить»? Куда? Он же набрал документ и своими глазами видел, что «тот в компьютере есть». Зачем его еще как-то «сохранять»? Ну ладно, ну хорошо, раз вы так уверяете, что нужно нажать эту кнопочку, он будет ее нажимать. Да-да, каждые 10 минут, специально для вас, он будет нажимать эту кнопочку (зачем она нужна?…). Конечно же, спустя некоторое время он забудет это сделать.
Человек «понимает» смысл и назначение вещей и действий с ними, только если они в его сознании находятся в рамках некоторой системы связанных друг с другом понятий. Набор текста на компьютере больше всего напоминает набор текста на печатной машинке (и специально сделан выглядящим так в редакторах WYSIWYG), чуть менее он близок к письму. В обоих этих случаях, написав или напечатав некоторый текст на листе бумаги, мы получим достаточно долго хранящийся документ. Чтобы избавиться от него, нужно предпринимать специальные действия — смять, порвать, пролить на него кофе, выкинуть в мусорную корзину. Если такой документ пропадает без наших действий, значит кто-то (сотрудник, начальник, жена, ребенок или уборщица) взял его. Человек, только что столкнувшийся с электронными документами, воспринимает их как аналоги бумажных и ожидает от них тех же свойств.
Документы «в компьютере» не такие. У компьютера есть два вида памяти — оперативная, или временная, и постоянная. В большинстве случаев набранный в редакторе текст находится в оперативной памяти, содержимое которой пропадает при отключении питания. Чтобы текст смог «пережить» это отключение, он должен быть перемещен в постоянную память. Именно для этого служит операция «сохранить документ».
В предыдущем абзаце описана некоторая система понятий, непривычная для новичка и не доступная с помощью непосредственного созерцания компьютера и размышлений. Ее необходимо как-то передать новому пользователю, иначе он не сможет понять, зачем же сохранять уже написанные документы, ведь они и так есть. Иначе, максимум, что он сможет сделать — выучить ритуал, согласно которому нужно иногда нажимать на кнопку «Сохранить». Очень многие люди работают с компьютерами и другой сложной техникой с помощью ритуалов, поскольку не всегда в силах разобраться в новой для них системе понятий, в рамках которой действует эта техника. Но гораздо чаще — потому, что ее производитель и разработчики не тратят столько усилий, сколько нужно, чтобы научить этой системе каждого пользователя.
Если же подпускать пользователей к компьютеру только после прочтения необходимой документации и усвоения ее информации, редко кто из них вообще заинтересуется использованием компьютера. Они используют компьютер и программное обеспечение только как инструменты для решения своих задач (единственный вид программ, где можно хоть как-то рассчитывать на чтение документации, — игры и развлечения), и им не хочется тратить время на чтение инструкций и осмысление правил, не относящихся напрямую к их области деятельности. Почему бы этим программам не быть столь же наглядными, как молоток и отвертка — никто не станет же всерьез читать инструкцию к отвертке?
Можно поспорить с этим на том основании, что компьютер и ПО намного сложнее отвертки — с их помощью можно выполнять гораздо больше действий и сами действия гораздо сложнее. Но, с другой стороны, умеют же сейчас делать автомобили, для вождения которых нужно знать только правила движения и основные элементы управления, а если что-то идет не так — пусть разбираются автослесари. Автомобиль сравним по сложности с самыми сложными программами, а то и превосходит их. И многие водители (по крайней мере, на Западе), используют автомобили, ничего не понимая в их устройстве. Пользователи изначально не хотят читать инструкции и не будут этого делать, пока эти инструкции занимают сотни страниц, написаны непонятным и сухим языком, требуют внимательности и обдумывания, не отвечают сразу на вопросы, которые интересуют пользователя в данный момент, а также пока начальство не скажет, что инструкцию все-таки прочитать надо. Но ведь есть еще и естественная человеческая забывчивость…
Удобство обычной, «некомпьютерной» модели работы с документами подтверждается тем, что Palm Pilot, первый компьютер без разделения памяти на временную и постоянную, разошелся небывалым для такого устройства тиражом — за первые два года было продано около 2 миллионов экземпляров.
Все сказанное выше служит иллюстрацией того факта, что «простота» и «легкость обучения» все-таки не совсем субъективны, а имеют объективные составляющие, которые необходимо учитывать при разработке части программного обеспечения, предназначенной для непосредственного взаимодействия с человеком — пользовательского интерфейса. Если посмотреть внимательнее, непонимание программистами пользователей в большой степени вызвано их, программистов, собственной ленью и нежеланием задумываться над непривычными вещами.
Рис.
9.1.
Что это? Лень или ошибка программиста, использовавшего не то стандартное окно Windows? А что делать пользователю, получившему такое сообщение?
Аннотация: рассматриваются основные факторы удобства использования ПО, а также психо-физиологические особенности человека, делающие предметы удобными и неудобными для него. Рассказывается о методике проектирования, ориентированного на удобство использования.
Удобство использования программного обеспечения
Одним из важных показателей качества программного обеспечения является удобство его использования. Оно описывается с помощью таких характеристик, как понятность пользовательского интерфейса, легкость обучения работе с ним, трудоемкость решения определенных задач с его помощью, производительность работы пользователя с ПО, частота появления ошибок и жалоб на неудобства. Для построения действительно удобных программ нужен учет контекста их использования, психологии пользователей, необходимости помогать начинающим пользователям и предоставлять все нужное для работы опытных. Однако самым значимым фактором является то, помогает ли данная программа решать действительно значимые для пользователей задачи.
Многие программисты имеют технический или математический склад ума. Для таких людей «понятность», «легкость обучения» представляются весьма субъективными факторами. Сами они достаточно легко воспринимают сложные вещи, если те представлены в рамках непротиворечивой системы понятий, как бы дико эта система и входящие в нее понятия ни выглядели для постороннего наблюдателя. Такие люди чаще всего изучают новое ПО при помощи документации и искренне убеждены в том, что пользователи будут разбираться с написанной ими программой тем же способом. Типичный подход программиста при разработке пользовательского интерфейса — предоставить пользователю те же рычаги и кнопки, с помощью которых программист сам хотел бы управлять своей программой.
К пользователям, у которых возникли проблемы с программой, многие программисты достаточно суровы. Любимый их ответ в такой ситуации — «RTFM!» (read this fucking manual, прочти эту чертову инструкцию). Они любят рассказывать друг другу анекдоты о «ламерах», которые не в силах понять, что файлы нужно сохранять.
Посмотрим теперь, что будет с «обычным человеком», впервые попытавшимся воспользоваться компьютером вообще и текстовым редактором в частности (как ни тяжело представить такое сейчас).
Пользователь открывает редактор, скажем, Microsoft Word, как-то набирает текст, затем печатает его на принтере и выключает компьютер. Когда он включает компьютер в следующий раз и не находит важный документ, который он набрал (вы же сами помните!), он страшно раздосадован. Что вы говорите? Надо было сохранить документ? Что значит «сохранить»? Куда? Он же набрал документ и своими глазами видел, что «тот в компьютере есть». Зачем его еще как-то «сохранять»? Ну ладно, ну хорошо, раз вы так уверяете, что нужно нажать эту кнопочку, он будет ее нажимать. Да-да, каждые 10 минут, специально для вас, он будет нажимать эту кнопочку (зачем она нужна?…). Конечно же, спустя некоторое время он забудет это сделать.
Человек «понимает» смысл и назначение вещей и действий с ними, только если они в его сознании находятся в рамках некоторой системы связанных друг с другом понятий. Набор текста на компьютере больше всего напоминает набор текста на печатной машинке (и специально сделан выглядящим так в редакторах WYSIWYG), чуть менее он близок к письму. В обоих этих случаях, написав или напечатав некоторый текст на листе бумаги, мы получим достаточно долго хранящийся документ. Чтобы избавиться от него, нужно предпринимать специальные действия — смять, порвать, пролить на него кофе, выкинуть в мусорную корзину. Если такой документ пропадает без наших действий, значит кто-то (сотрудник, начальник, жена, ребенок или уборщица) взял его. Человек, только что столкнувшийся с электронными документами, воспринимает их как аналоги бумажных и ожидает от них тех же свойств.
Документы «в компьютере» не такие. У компьютера есть два вида памяти — оперативная, или временная, и постоянная. В большинстве случаев набранный в редакторе текст находится в оперативной памяти, содержимое которой пропадает при отключении питания. Чтобы текст смог «пережить» это отключение, он должен быть перемещен в постоянную память. Именно для этого служит операция «сохранить документ».
В предыдущем абзаце описана некоторая система понятий, непривычная для новичка и не доступная с помощью непосредственного созерцания компьютера и размышлений. Ее необходимо как-то передать новому пользователю, иначе он не сможет понять, зачем же сохранять уже написанные документы, ведь они и так есть. Иначе, максимум, что он сможет сделать — выучить ритуал, согласно которому нужно иногда нажимать на кнопку «Сохранить». Очень многие люди работают с компьютерами и другой сложной техникой с помощью ритуалов, поскольку не всегда в силах разобраться в новой для них системе понятий, в рамках которой действует эта техника. Но гораздо чаще — потому, что ее производитель и разработчики не тратят столько усилий, сколько нужно, чтобы научить этой системе каждого пользователя.
Если же подпускать пользователей к компьютеру только после прочтения необходимой документации и усвоения ее информации, редко кто из них вообще заинтересуется использованием компьютера. Они используют компьютер и программное обеспечение только как инструменты для решения своих задач (единственный вид программ, где можно хоть как-то рассчитывать на чтение документации, — игры и развлечения), и им не хочется тратить время на чтение инструкций и осмысление правил, не относящихся напрямую к их области деятельности. Почему бы этим программам не быть столь же наглядными, как молоток и отвертка — никто не станет же всерьез читать инструкцию к отвертке?
Можно поспорить с этим на том основании, что компьютер и ПО намного сложнее отвертки — с их помощью можно выполнять гораздо больше действий и сами действия гораздо сложнее. Но, с другой стороны, умеют же сейчас делать автомобили, для вождения которых нужно знать только правила движения и основные элементы управления, а если что-то идет не так — пусть разбираются автослесари. Автомобиль сравним по сложности с самыми сложными программами, а то и превосходит их. И многие водители (по крайней мере, на Западе), используют автомобили, ничего не понимая в их устройстве. Пользователи изначально не хотят читать инструкции и не будут этого делать, пока эти инструкции занимают сотни страниц, написаны непонятным и сухим языком, требуют внимательности и обдумывания, не отвечают сразу на вопросы, которые интересуют пользователя в данный момент, а также пока начальство не скажет, что инструкцию все-таки прочитать надо. Но ведь есть еще и естественная человеческая забывчивость…
Удобство обычной, «некомпьютерной» модели работы с документами подтверждается тем, что Palm Pilot, первый компьютер без разделения памяти на временную и постоянную, разошелся небывалым для такого устройства тиражом — за первые два года было продано около 2 миллионов экземпляров.
Все сказанное выше служит иллюстрацией того факта, что «простота» и «легкость обучения» все-таки не совсем субъективны, а имеют объективные составляющие, которые необходимо учитывать при разработке части программного обеспечения, предназначенной для непосредственного взаимодействия с человеком — пользовательского интерфейса. Если посмотреть внимательнее, непонимание программистами пользователей в большой степени вызвано их, программистов, собственной ленью и нежеланием задумываться над непривычными вещами.
Рис.
9.1.
Что это? Лень или ошибка программиста, использовавшего не то стандартное окно Windows? А что делать пользователю, получившему такое сообщение?
Ясность — работа № 1
Clarity — это первая и самая важная работа любого интерфейса. Чтобы эффективно использовать интерфейс, который вы разработали, люди должны уметь распознавать, что это такое, заботиться о том, почему они будут его использовать, понимать, с чем интерфейс помогает им взаимодействовать, предсказывать, что произойдет, когда они его используют, и затем успешно взаимодействовать с ним. Хотя в интерфейсах есть место для таинственности и отложенного удовлетворения, здесь нет места для путаницы.Ясность внушает доверие и ведет к дальнейшему использованию. Сто чистых экранов предпочтительнее одного загроможденного.
Существуют интерфейсы для обеспечения взаимодействия
Интерфейсы существуют для обеспечения взаимодействия между людьми и нашим миром. Они могут помочь прояснить, осветить, включить, показать отношения, объединить нас, разлучить нас, управлять нашими ожиданиями и дать нам доступ к услугам. Акт проектирования интерфейсов не является ст. Интерфейсы не являются памятниками сами по себе.Интерфейсы выполняют свою работу, и их эффективность можно измерить. Однако они не просто утилитарные. Лучшие интерфейсы могут вдохновлять, вызывать, загадывать и интенсифицировать наши отношения с миром.
Сохраняйте внимание любой ценой
Мы живем в мире прерываний. Трудно больше читать в мире без каких-либо попыток отвлечь нас и направить наше внимание куда-либо еще. Внимание драгоценно. Не засоряйте сторону ваших приложений отвратительным материалом … помните, почему экран существует в первую очередь.Если кто-то читает, дайте ему закончить чтение, прежде чем показывать эту рекламу (если вы должны ). Уважайте внимание, и ваши читатели будут не только счастливее, но и результаты будут лучше. Когда использование является основной целью, внимание становится предпосылкой. Сохраните это любой ценой.
Держите пользователей под контролем
Люди чувствуют себя наиболее комфортно, когда чувствуют, что контролируют себя и свое окружение. Бездумное программное обеспечение убирает этот комфорт, заставляя людей вступать в незапланированные взаимодействия, путать пути и получать неожиданные результаты.Держите пользователей под контролем, регулярно отображая состояние системы, описывая причинно-следственную связь (если вы это сделаете, это произойдет) и давая представление о том, чего ожидать на каждом шагу. Не беспокойтесь об утверждении очевидного … очевидного почти никогда не бывает.
Прямые манипуляции лучше
Лучший интерфейс вообще отсутствует, когда мы можем напрямую манипулировать физическими объектами в нашем мире. Поскольку это не всегда возможно, а объекты становятся все более информативными, мы создаем интерфейсы, которые помогают нам взаимодействовать с ними.Легко добавить в интерфейс больше слоев, чем необходимо, создавая чрезмерно изогнутые кнопки, хром, графику, опции, предпочтения, окна, вложения и другие вещи, так что в итоге мы манипулируем элементами пользовательского интерфейса, а не тем, что важно. Вместо этого стремитесь к этой первоначальной цели прямого манипулирования … спроектируйте интерфейс с минимально возможным размером следа, распознавая как можно больше естественных человеческих жестов. В идеале интерфейс настолько мал, что у пользователя возникает ощущение прямой манипуляции с объектом его внимания.
Одно основное действие на экран
Каждый экран, который мы проектируем, должен поддерживать единственное действие, реально ценное для человека, использующего его. Это облегчает изучение, использование и позволяет добавлять или дополнять при необходимости. Экраны, которые поддерживают два или более основных действия, быстро сбивают с толку. Подобно тому, как у написанной статьи должен быть один сильный тезис, каждый экран, который мы разрабатываем, должен поддерживать одно сильное действие, которое является его смыслом.
Сохранить вторичные действия вторичные
Экраны с одним основным действием могут иметь несколько дополнительных действий, но их необходимо сохранить вторичными! Причина, по которой ваша статья существует, заключается не в том, что люди могут поделиться ею в Твиттере … она существует для того, чтобы люди могли ее прочитать и понять. Оставьте второстепенные действия вторичными, сделав их легче, визуально или показав их после того, как первичное действие было достигнуто.
Обеспечить естественный следующий шаг
Очень немногие взаимодействия предназначены для того, чтобы быть последними, поэтому продумайте следующий шаг для каждого взаимодействия человека с вашим интерфейсом.Предугадать, каким должно быть следующее взаимодействие, и разработать его для поддержки. Так же, как нам нравится в человеческом разговоре, предоставьте возможность для дальнейшего взаимодействия. Не оставляйте человека в покое, потому что он сделал то, что вы хотите, чтобы он сделал… дайте ему естественный следующий шаг, который поможет ему в дальнейшем достичь своих целей.
Внешний вид следует за поведением
Людям больше всего нравится то, что ведет себя так, как мы ожидаем. Другие люди, животные, предметы, программное обеспечение.Когда кто-то или что-то ведет себя в соответствии с нашими ожиданиями, мы чувствуем, что у нас с ним хорошие отношения. Для этого разработанных элементов должны выглядеть так, как они себя ведут. Форма следует за функцией. На практике это означает, что кто-то должен быть в состоянии предсказать, как будет вести себя элемент интерфейса, просто взглянув на него. Если выглядит как как кнопка, то должен действовать как как кнопка. Не становитесь милыми с основами взаимодействия… сохраняйте свое творчество для проблем более высокого порядка.
Согласованность имеет значение
Следуя предыдущему принципу, элементы экрана не должны выглядеть согласованно друг с другом, если они не ведут себя согласованно друг с другом. Элементы, которые ведут себя одинаково, должны выглядеть одинаково. Но столь же важно, чтобы отличающиеся элементы выглядели непохожими (непоследовательными), как и для одинаковых элементов, чтобы они выглядели согласованными. Стремясь быть последовательными, начинающие дизайнеры часто скрывают важные различия, используя одну и ту же визуальную обработку (часто для повторного использования кода), когда уместна другая визуальная обработка.
Сильные визуальные иерархии работают лучше всего
Сильная визуальная иерархия достигается при четком порядке просмотра визуальных элементов на экране. То есть, когда пользователи каждый раз просматривают одни и те же элементы в одном и том же порядке. Слабые визуальные иерархии дают мало подсказок о том, где можно отдохнуть, и в итоге чувствуют себя беспорядочно и запутанно. В условиях больших перемен трудно поддерживать сильную визуальную иерархию, потому что визуальный вес является относительным: когда все смело, ничто не смело.Если на экран будет добавлен один визуально тяжелый элемент, дизайнеру может потребоваться сбросить визуальный вес всех элементов, чтобы снова добиться сильной иерархии. Большинство людей не замечают визуальную иерархию, но это один из самых простых способов усилить (или ослабить) дизайн.
Умная организация снижает когнитивную нагрузку
Как говорит Джон Маэда в своей книге Simplicity , умная организация элементов экрана может сделать многие из них похожими на несколько .Это помогает людям быстрее и проще понять ваш интерфейс, поскольку вы проиллюстрировали присущие контенту взаимосвязи вашего дизайна. Группируйте вместе, как элементы, показывайте естественные отношения по расположению и ориентации. Разумно организовывая свой контент, вы уменьшаете его когнитивную нагрузку на пользователя … который не должен думать о том, как элементы связаны, потому что вы сделали это для них. Не заставляйте пользователя разбираться с вещами … показывайте их, создавая эти отношения на своих экранах.
Выделите, не определяйте, цветом
Цвет физических вещей меняется с изменением света. При полном дневном свете мы видим совсем другое дерево, чем на фоне заката. Как и в физическом мире, где цвет — это многоцветная вещь, цвет не должен сильно влиять на интерфейс. Это может помочь, быть использовано для выделения, быть направленным на внимание, но не должно быть единственным отличительным признаком. При длительном чтении или увеличенной продолжительности экрана используйте светлые или приглушенные фоновые цвета, сохраняя более яркие оттенки для ваших акцентных цветов.Конечно, есть время и для ярких фоновых цветов, просто убедитесь, что они подходят для вашей аудитории.
Прогрессивное раскрытие
Показывать только то, что нужно на каждом экране. Если люди делают выбор, покажите достаточно информации, чтобы позволить им сделать выбор, а затем погрузитесь в детали на следующем экране. Избегайте тенденции переоценивать или показывать все сразу. По возможности, откладывайте решения до последующих экранов, постепенно раскрывая информацию по мере необходимости.Это сделает ваши взаимодействия более понятными.
Помогите людям встроить
В идеальных интерфейсах помощь не требуется, потому что интерфейс является обучаемым и применимым. Шаг ниже этого, , реальность , — это шаг, в котором помощь является встроенной и контекстуальной, доступной только тогда и там, где она необходима, скрытой от просмотра в любое другое время. Просьба людей обратиться за помощью и найти ответ на свой вопрос заставляет их знать, что им нужно.Вместо этого создайте справку там, где это необходимо … просто убедитесь, что она не подходит людям, которые уже знают, как использовать ваш интерфейс.
Решающий момент: нулевое состояние
Первый опыт работы с интерфейсом имеет решающее значение, но часто упускается из виду дизайнерами. Чтобы наилучшим образом помочь нашим пользователям освоиться с нашими проектами, лучше всего проектировать для нулевого состояния, состояния, в котором еще ничего не произошло. Это состояние не должно быть чистым холстом… оно должно обеспечивать направление и руководство для ускорения.Большая часть трения взаимодействия находится в этом начальном контексте … как только люди понимают правила, они имеют гораздо более высокую вероятность успеха.
Отличный дизайн невидим
Любопытным свойством великолепного дизайна является то, что он обычно остается незамеченным людьми, которые его используют. Одна из причин этого заключается в том, что если проект успешен, пользователь может сосредоточиться на своих собственных целях, а не на интерфейсе… когда они достигают своей цели, они удовлетворены и им не нужно размышлять над ситуацией.Для дизайнера это может быть непросто … поскольку мы получаем меньше удовольствия, когда наши проекты хороши. Но великие дизайнеры довольны хорошо используемым дизайном … и знают, что счастливые пользователи часто молчат.
Опираться на другие дисциплины дизайна
Визуальный и графический дизайн, типографика, копирайтинг, информационная архитектура и визуализация … все эти дисциплины являются частью дизайна интерфейса. Они могут быть затронуты или специализированы. Не вступайте в битвы за газоны и не смотрите свысока на другие дисциплины: извлеките из них аспекты, которые помогут вам выполнять свою работу, и продолжайте.Получите представление о, казалось бы, не связанных дисциплинах … что мы можем извлечь из публикации, написания кода, переплетного дела, скейтбординга, пожаротушения, каратэ?
Существуют интерфейсы для использования
Как и в большинстве дисциплин дизайна, дизайн интерфейса успешен, когда люди используют то, что вы разработали. Как красивый стул, в котором неудобно сидеть, дизайн провалился, когда люди решили его не использовать. Следовательно, проектирование интерфейса может быть связано как с созданием среды для использования, так и с созданием артефакта, который стоит использовать.Для интерфейса недостаточно удовлетворения эго его дизайнера: его нужно использовать!
,
Принципы проектирования пользовательского интерфейса на 2018 год: новые правила разработки пользовательского интерфейса, которые позволят поддерживать ваши проекты в области веб-дизайна в этом году
С изменением принципов дизайна пользовательского интерфейса , стирающим границы между реальностью и экранами, 2017 год стал большим годом для дизайна пользовательского интерфейса.
Основные события включали в себя развитие интеллектуальных технологий, которые поощряли более персонализированный опыт и сделали дизайн UX более инклюзивным. Такие бренды, как Dropbox и Microsoft, сделали свои интерфейсы более доступными, а лучшие дизайны пользовательского интерфейса отличались четкими линиями, контрастными цветами и жирными шрифтами.И давайте не будем забывать о приоритете производительности мобильных устройств в 2017 году.
Похоже, что дизайнерам UI / UX 2018 года придется многое сделать. В сегодняшнем сообщении мы рассмотрим новые возможности и проблемы, связанные с дизайном пользовательского интерфейса, которые принесут этот год. От яркого визуального дизайна до динамического взаимодействия, мы смотрим на новые принципы дизайна пользовательского интерфейса 2018 года.
И помните, что лучший способ разобраться с изменениями пользовательского интерфейса — это попробовать сами! Скачайте Justinmind сейчас, чтобы удовлетворить все ваши потребности в дизайне пользовательского интерфейса и создании прототипов!
Принципы дизайна пользовательского интерфейса 2018 — Смешанный минимализм
Минимализм
останется одним из главных трендов дизайна пользовательского интерфейса в 2018 году, но с изюминкой.В этом году мы приветствуем эру холста: широкий пробел встречает смелые графические элементы и анимированный CSS.
Минимализм был одной из самых популярных тенденций веб-дизайна с начала 2000-х годов. Он направлен на уменьшение когнитивной перегрузки и повышение удобства использования пользовательских интерфейсов, подчеркивая простоту и удаляя лишние элементы.
Минималистский дизайн пользовательского интерфейса
, как правило, содержит большое количество пустого пространства, чистые и четкие края и ограниченную цветовую палитру, чтобы привлечь внимание пользователя к важным элементам.
В этом году макеты пользовательского интерфейса будут по-прежнему занимать значительные объемы пустого пространства, чтобы было удобнее читать контент и быстрее загружать страницы.
Но с улучшением разрешения монитора и насыщенности цвета, вы можете ожидать несколько обновлений. Жидкие, геометрические фигуры, увлекательное фотографическое содержание и восхитительные микровзаимодействия будут переломными моментами в игре в 2018 году — так что приготовьтесь к ярким визуальным эффектам!
Скачайте Justinmind и испытайте свои навыки проектирования пользовательского интерфейса!
Скачать бесплатно
Принципы дизайна пользовательского интерфейса 2018 — Выразительная типография
В 2018 году сверхразмерная и очень визуальная типография будет выполнять тяжелую работу, заменяя традиционные шрифты.
Типографика всегда была важной частью дизайна пользовательского интерфейса, помогая сосредоточить внимание пользователя, вызвать эмоции и задать тон контента. Являясь неотъемлемой частью индивидуальности бренда, дизайнеры пользовательского интерфейса в значительной степени старались не рисковать и избегали экспериментировать с различными шрифтами.
Но в этом году правила меняются. Благодаря чистым и простым макетам, в которых доминируют высочайшие и насыщенные изображениями дизайны, занимающие заднее сиденье, мы увидим смелые, яркие шрифты в центре внимания. Обратите внимание на тяжелые, жирные шрифты с засечками и большие заголовки, которые будут оказывать влияние, поскольку дизайнеры пользовательского интерфейса принимают эту тенденцию «больше, чем жизнь».
Это обновление принципа дизайна пользовательского интерфейса улучшит юзабилити и SEO, так как контент будет легче найти. Кроме того, одностраничные сайты имеют тенденцию загружаться быстрее — это ключевой момент, поскольку время загрузки страницы может повлиять на удобство работы вашего сайта, коэффициент конверсии и доход от продаж.
Так что дизайнеры пользовательского интерфейса, не стесняйтесь! Попробуйте смешать эти шрифты и поэкспериментировать с расстоянием и весом. Не уверены, какие шрифты хорошо сочетаются? Прочитайте наш пост о лучших шрифтах для веб-дизайна и дизайна мобильных приложений.
Принципы дизайна пользовательского интерфейса 2018 — яркие и смелые оттенки
UI color получит новый облик в этом году! Попрощайтесь с мягкими, приглушенными тонами — они так 2017 года. Приготовьтесь к глубоким розовым, ярким зеленым и теплым желтым на веб-сайтах и в приложениях.
Цвет
оказывает огромное влияние на то, как пользователи воспринимают ваш бренд, влияя как на их эмоции, так и на коэффициент конверсии.
В этом году ожидайте смелых, драматических цветов для свежего ощущения. При ответственном использовании яркие цвета могут сделать текст более читабельным и создать ощущение, что интерфейс пульсирует энергией.
Но это еще не все. Градиент также будет возвращаться, так как наложения дуплекса уже дебютировали в 2017 году на таких сайтах, как Spotify, WordPress и Justinmind.
Будь смелым! Начните экспериментировать с цветами пользовательского интерфейса и создайте потрясающий веб-дизайн и дизайн для мобильных устройств прямо сейчас! С Justinmind легко протестировать различные цвета фона для вашего интерфейса, а также изменить цвет элементов пользовательского интерфейса с помощью векторов SVG. Совет: Ultra Violet — это цвет Pantone 2018 года.
Принципы проектирования пользовательского интерфейса 2018 — Отображение пользовательского интерфейса без полей
Интерфейсы
«вне сети» набирают обороты, предоставляя пользователям максимально беспроблемную работу. Дизайнеры пользовательского интерфейса меняют объемные границы экрана на пользовательские интерфейсы без границ, делая упор на то, чтобы сделать навигацию более плавной, а рассказывание историй — более плавным.
Сайты и приложения традиционно создавались в многоэкранных системах, основанных на сетках, что знакомо большинству пользователей. Но появился новый тип компоновки экрана: отображение интерфейса без полей.
Также известный как
Также известный как одностраничный веб-сайт и бескрайний или бесконечный экран, это будет большой тенденцией для 2018 года — взгляните, например, на сайт iPhone X.
Пользователи смогут просматривать весь контент сайта простым, линейным способом, без необходимости переключаться между экранами. Одно плавное движение с помощью прокрутки мыши уменьшит необходимость перенаправления на несколько страниц и обеспечит пользователям непрерывное погружение. Узнайте, как создать один в своем веб-и мобильных прототипах здесь.
Это особенно важный принцип проектирования пользовательского интерфейса, когда речь идет о мобильных приложениях, где медленные страницы часто портят пользовательский интерфейс. Узнайте больше о разработке UI навигационных систем для мобильных приложений здесь.
Принципы дизайна пользовательского интерфейса 2018 — год анимации
Анимация пользовательского интерфейса
будет продолжать помогать пользователю обойти пользовательские интерфейсы.
С появлением интеллектуальных технологий в виде чат-ботов и VUI пользователи жаждут более персонализированного и увлекательного опыта и не ожидают, что придется ждать загрузки страницы.Взаимодействие с сайтами и приложениями в будущем должно быть безупречным.
Анимированные значки пользовательского интерфейса и микро-взаимодействия будут и впредь обеспечивать обратную связь с пользователем и обеспечивать плавность в пути пользователя. Вот несколько примеров того, как микро-взаимодействия могут помочь пользователю.
Кроме того, мы увидим возвращение анимированного GIF в этом году. Как советует Ли Фаскиани, гифки теперь могут читать почти все, и дизайнеры смогут использовать эту возможность для восстановления электронной почты, сообщений и веб-страниц.
Обратите внимание на эти 5 анимаций мобильного интерфейса пользователя и загрузите наши 3 примера бесплатно!
Принципы дизайна пользовательского интерфейса 2018: вынос
Это будет захватывающий год для дизайна пользовательского интерфейса! С более крупными и смелыми шрифтами, более яркими цветовыми схемами и плавной активностью, все выглядит так, как будто 2018 год станет годом экспериментального проектирования.
Итак, каков наилучший способ остаться на плаву с изменениями принципов дизайна пользовательского интерфейса ? Иметь лучшие инструменты дизайна в вашем распоряжении! Justinmind — это инструмент для разработки и создания прототипов пользовательского интерфейса.Используйте его для разработки визуальных и интерактивных функций для веб-сайтов и мобильных проектов. Скачать Justinmind бесплатно прямо сейчас!
,
О, Google Maps … где бы я был без тебя?
Вероятно, все еще едем по проселочной дороге на полпути к Нью-Мексико. И все, что я хотел, это пойти в магазин на углу.
Но это не статья о моем недостатке навигационных навыков. Речь идет о том, как нам всем нравится знать, как обойтись без потерь. И когда я пользуюсь веб-сайтом, компьютерной программой, видеоигрой или чем-то еще, что требует от меня взаимодействия с каким-либо программным обеспечением, мне также нравится знать, как обойтись без потерь.
К счастью, мы живем в мире, где такие предметы, как дизайн пользовательского опыта и дизайн пользовательского интерфейса, являются достаточно дисциплинарными дисциплинами, поэтому мы склонны сокращать их до дизайна UX / UI, и люди все еще знают, о чем мы говорим. И все же удивительно, сколько раз я все еще оказываюсь на веб-сайте и чувствую, что уровень моего разочарования растет, потому что я не могу понять, как сделать то, что мне кажется, должно быть простой задачей. Иногда я действительно хочу поехать в Нью-Мексико, но все, что мне дают, это указания на угловой магазин.
Ниже я изложил 5 принципов дизайна интерфейса, ориентированного на пользователя, принципы, которые помогают нашим веб-сайтам и приложениям держать нас в курсе. Я больше всего знаком с веб-сайтами и мобильными интерфейсами, но на самом деле эти принципы могут быть применены к любому интерфейсу или в любое время, когда кто-то имеет точку контакта с цифровой или механической системой. Интерфейсом может быть меню навигации, поле поиска, диалоговое окно, указатель выбора, палитра инструментов, функция перетаскивания, веб-форма, простая кнопка и многое другое.Интерфейс также является кнопкой питания на вашем компьютере и регулятором громкости на вашем стерео. И сенсорный экран вашего iPad. Интерфейсы — это слои, через которые мы, люди, взаимодействуем с нашими машинами. В моем мире веб-дизайна интерфейсы так важны, потому что независимо от содержимого веб-сайта, если кто-то не может легко перемещаться по вашему сайту, этот отличный контент никогда не будет найден. И мир, возможно, никогда не узнает о видео твоего всерьез… милого… котёнка… когда-либо.
Теперь на первый взгляд приведенные ниже принципы могут показаться довольно очевидными.Тем не менее, никогда не повредит вновь подчеркнуть очевидное, когда дело доходит до лучших практик веб-дизайна. Сколько раз вам нужно было просто вывести сайт на улицу и испытать искушение пропустить предоставление атрибутов alt для тех последних двух изображений, которые вы используете? Удержаться от соблазна! И иногда даже вещи, которые кажутся очевидными, оказываются не столь очевидными на первый взгляд. Если бы это было не так, то все интерфейсы были бы просты в использовании, и таким людям, как я, не нужно было бы писать статью, в которой говорилось бы об очевидном.Хорошо, вы достаточно долго ждали, следуя принципам …
Митчелл Капор написал Манифест разработки программного обеспечения еще в 2002 году, и есть цитата из этой статьи, которую я до сих пор люблю использовать:
«Если пользовательский интерфейс разработан« по факту », это похоже на проектирование приборной панели автомобиля после определения двигателя, шасси и всех других компонентов и функций».
Теперь, на первый взгляд, вы можете подумать, что ничего страшного: приборная панель автомобиля или интерфейс веб-сайта могут быть спроектированы, когда у вас будут все основные компоненты и функциональность.Но это обычно приводит к неприятностям. Зачем? Поскольку ваши пользователи не взаимодействуют напрямую с вашими основными компонентами — они испытывают вашу систему и все, что она может для них сделать, через предоставляемые вами интерфейсы. И если эти интерфейсы разработаны по факту, для них почти невозможно достичь целей всех ваших пользователей. Другими словами, вам необходимо сначала понять своих пользователей — их потребности и цели — чтобы создать интерфейс, который позволит им эффективно получать доступ к функциональности вашей системы.
Важные вопросы, которые следует задать при создании ориентированного на пользователя интерфейса: кто такие пользователи? Какие основные функции понадобятся пользователю? Почему пользователь использует именно эту часть программного обеспечения / оборудования и каковы его цели? Доступно ли программное / аппаратное обеспечение пользователям с разным уровнем опыта? Как наиболее интуитивно понятный способ взаимодействия пользователя с программным / аппаратным обеспечением?
Для типичного владельца iPhone они не заботятся о великолепии программной и аппаратной инженерии, которая пошла на создание их устройства, они просто знают, что им легко и приятно пользоваться.Проведите пальцем, коснитесь, щепотка двумя пальцами, рогатка разозлила птицу. Вы можете поспорить, что Apple никогда ничего не создает, не задумываясь о том, как люди будут взаимодействовать со своими продуктами, и я полагаю, что преобладающая философия ориентированного на пользователя дизайна на всех уровнях жизненного цикла их разработки является важной причиной успеха Apple.
Для веб-сайтов создание интерфейса, которым приятно пользоваться, может показаться менее очевидным, если только вы не создаете сложный интерфейс для Flash-игры, но быть приятным может быть так же просто, как навигационная структура, которая проста и интуитивно понятна.Тем не менее, поскольку все больше приложений перемещаются в облако, а наш браузер становится нашей операционной системой, создание эффективных, простых и приятных интерфейсов для наших веб-продуктов никогда не было более важным. Недавно я перешел с настольного программного обеспечения для создания каркасов (Axure, Omnigraffle) на онлайн-приложение под названием Lucid Chart, и переход прошел гладко, потому что авторы постарались создать веб-интерфейс, который прост в использовании и знаком для тех, кто мигрирует из настольных программ.
Важной концепцией, помогающей пользователю сохранять чувство пространственной ориентации и здравомыслия, является сохранение последовательности.С точки зрения пользователя это означает не только непротиворечивый интерфейс системы, но и то, что действия, выполняемые над интерфейсом, приводят к ожидаемым результатам. Если одно и то же действие повторяется, система должна реагировать последовательно.
Я до сих пор время от времени сталкиваюсь со странным веб-сайтом, который фактически меняет порядок своих навигационных панелей или ссылок суб-навигации в зависимости от того, на какой странице вы находитесь на их сайте. Для меня это эквивалент переключения педалей газа и тормоза вашего автомобиля в зависимости от того, едете ли вы по шоссе или по боковой дороге.Интерфейсы должны оставаться согласованными, чтобы они могли переходить в фоновый режим и не требовать более высокого уровня концентрации для использования.
Мне нравится интерфейс, который говорит со мной. Не буквально говорите со мной (хотя это может быть и неплохо), но интерфейс, который использует термины, которые имеют смысл и дает мне обратную связь, когда мне это нужно.
Чтобы гарантировать, что мы не потеряемся и всегда сможем найти то, что ищем, важно, чтобы интерфейс был правильно маркирован. Все понимают, что должна делать кнопка «домой» в навигационной панели, но не каждый ярлык меню всегда так очевиден.Например, предположим, у вас есть многопользовательская игра на вашем сайте, которая позволяет людям соревноваться друг с другом, перемещаться вверх и вниз по спискам лидеров, общаться, формировать группы и т. Д. Вы помещаете эту игру в «Мультимедиа» или «Сообщество» ”В вашей навигации, если это только ваши два варианта? Это когда такие методы, как сортировка карт, могут помочь вам определить лучшую навигационную структуру.
Механизм обратной связи также имеет решающее значение для эффективного проектирования интерфейса: пользователь должен чувствовать, что его действия имеют смысл.Например, мы все знакомы с заполнением и отправкой онлайн-формы, но вы когда-нибудь нажимали кнопку отправки и просто обновляли страницу и снова представляли пустую форму? Затем вы вынуждены спросить, прошла ли ваша информация, была ли ошибка, я должен заполнить форму еще раз, чтобы убедиться? Не оставляйте никаких сомнений в уме вашего пользователя — оставляйте им отзывы о своих действиях. Спасибо за ваш запрос, кто-то свяжется с вами, как только мы вернемся с нашего запуска Starbucks.
Самый быстрый способ запретить удовольствие — это вызвать разочарование по поводу простого интерфейса и проблем с навигацией. Если вы похожи на меня, тестирование никогда не будет самой веселой частью процесса, но это жизненно важно. Это конкурентный рынок, и если в интерфейсе вашей системы есть заметные ошибки, вы рискуете потерять своих пользователей, возможно, навсегда, независимо от того, насколько хорош ваш контент. Проблемы с интерфейсом могут быть чем-то большим, чем просто программные ошибки, поскольку плохо спроектированный интерфейс все еще остается серьезной проблемой.Хороший способ проверить ваш интерфейс — наблюдать, как люди используют вашу систему в реальном сценарии. Могут ли они перемещаться и достигать своих целей относительно легко? Ваш интерфейс интуитивно понятен как опытным, так и менее опытным пользователям компьютеров?
Я прощу веб-сайт за небольшие проблемы с интерфейсом, которые могут заставить меня немного покачать головой, но время — ограниченный ресурс, и если слишком много проблем мешают выполнению задач, которые я пытаюсь выполнить, извините, но я двигаться дальше.
У меня есть секрет, чтобы поделиться. Я любитель красивого сайта. Но правда в том, что в конечном итоге визуальная эстетика сайта, скорее всего, не будет иметь никакого отношения к его успеху или провалу. Если сайт выглядит хорошо, мое внимание привлекается, и я могу получать удовольствие от дизайна, но затем он быстро сводится к тому, может ли сайт сделать для меня то, что я хочу. Ключевыми факторами, определяющими успех веб-сайта, являются его удобство и простота использования. Контент, конечно, важен, но контент должен быть найден и доступен.
Итак, я надеюсь, что вы рассмотрите эти 5 принципов пользовательского дизайна интерфейса в ваших текущих и будущих проектах. Есть, конечно, гораздо больше принципов, чем только эти пять, но для этого и нужны книги по UX-дизайну. Я просто надеюсь дать вам пищу для размышлений или еще раз подчеркнуть то, что вы уже знаете, чтобы мы все могли работать над созданием мира с лучшими интерфейсами!
Отличительной особенностью ориентированного на пользователя дизайна интерфейса является то, что он никогда не стоит на месте.Он включает в себя так много разных дисциплин — аппаратное и программное обеспечение, эргономику, психологию, социологию, лингвистику, информатику и т. Д. — что это развивающийся и постоянно растущий предмет, и полное понимание сложностей, с которыми мы сталкиваемся, означает, что мы никогда не сможем остановиться исследовать и узнавать об этом.
Теперь о том, как добраться до этого углового магазина в Нью-Мексико…
,
Научитесь проектировать с учетом согласованности и стандартов и понять причины, по которым они важны для включения их в вашу работу. «Согласованность и стандарты», полученные из руководящих принципов Якова Нильсена и Рольфа Молича «Десять пользовательских интерфейсов», очевидны во многих широко используемых продуктах, созданных некоторыми из наиболее успешных компаний. Такие продукты, как Adobe Photoshop, первоначально выпущенный в 1990-х годах, и Google Gmail, выпущенный в середине 2000-х годов, — это лишь некоторые из широко популярных продуктов, демонстрирующих это важное правило.Эта статья научит вас распознавать согласованность и стандарты, а также объяснит, почему они важны в дизайне пользовательского интерфейса.
Две ключевые причины для согласованности и стандартов в дизайне пользовательского интерфейса
При разработке пользовательского интерфейса важно помнить о взаимодействиях между человеческим познанием и экраном, для которого вы разрабатываете. Упрощение для ваших пользователей означает не заставлять их изучать новые представления или наборы инструментов для каждой задачи.Сокращение продолжительности мыслительного процесса за счет устранения путаницы также является верным выбором, когда речь идет об улучшении взаимодействия с пользователем.
1. Сокращение обучения
Согласованность ограничивает количество способов представления действий и операций, гарантируя, что пользователям не придется изучать новые представления для каждой задачи. Кроме того, установление норм проектирования, таких как следующие соглашения о платформе, позволяет пользователям выполнять новые задачи, не изучая совершенно новый набор инструментов. Это может звучать как простая концепция, но есть много примеров, демонстрирующих непоследовательность в их проектах.Одним из таких примеров, иллюстрирующих эту проблему, является веб-сайт американской компании средств массовой информации Comcast Corporation для Xfinity. На их веб-сайте не только непоследовательное вторичное меню почти каждый раз, когда пользователь нажимает на другую страницу, но и непоследовательное для основного меню. Давайте посмотрим и сравним три разные страницы веб-сайта: домашнюю страницу, My Xfinity и телевизор.
Автор / правообладатель: Comcast Corporation. Условия авторского права и лицензия: добросовестное использование.
Это домашняя страница сайта Xfinity. Обратите внимание на то, как аннотированная область, подсвечивающая основные и дополнительные строки меню, будет отличаться при переходе пользователя на другие страницы.
Автор / правообладатель: Comcast Corporation. Условия авторского права и лицензия: добросовестное использование.
Это телевизионная страница веб-сайта Xfinity. Что сбивает с толку пользователя, так это то, что цвета, макет и стили шрифтов отличаются от домашней страницы.
Автор / правообладатель: Comcast Corporation. Условия авторского права и лицензия: добросовестное использование.
Это страница My Xfinity на веб-сайте Xfinity. Все три страницы, рассмотренные выше, имеют очень разные цвета, расположение и стили шрифта в их меню навигации. Эти различия делают его запутанным и дезориентирующим для пользователя, так как он больше не похож на один веб-сайт, как если бы это были три разные компании.
2.Устранить путаницу
Пользователи, как правило, применяют правила, с которыми они сталкивались за пределами вашего веб-сайта или продукта, привнося набор собственных ожиданий. Зная это, мы должны помнить о том, не вызываем ли мы путаницу и отчуждение, когда мы отклоняемся от стандартов и соглашений проектирования. Кроме того, пользователям не нужно тратить время на размышления о том, означают ли разные слова, взаимодействия или действия одно и то же в контексте вашего продукта. Путаница возникает, когда люди не могут «собрать воедино» информацию, а иногда и мешают им чего-то достичь.Когда пользователю мешают достичь своей цели, понятно, что он может чувствовать злость или разочарование. Ни для кого не секрет, что путаница обычно вызывает разочарование, а разочарование ведет к ухудшению восприятия пользователем. Поэтому вы всегда должны стремиться устранить путаницу в каждой точке касания, где это возможно.
Пять способов достижения согласованности в вашей работе
Существует множество аспектов достижения согласованности в вашем пользовательском интерфейсе. Вот 5 вещей, на которые вы можете обратить внимание, чтобы улучшить согласованность ваших проектов:
1.Ваш выбор языка
Язык, который вы используете как в маркетинговой копии, так и в формулировках, используемых в потоке пользователей, может не только повлиять на восприятие вашего продукта вашим пользователем, но также может привести к путанице, когда вы будете использовать другую терминологию для представления то же самое. Это касается не только выбранных вами терминов, но и тона, в котором вы передаете свое сообщение.
Напугав вашего пользователя серьезным и угрожающим сообщением об ошибке, когда он просматривает сайт электронной торговли, который демонстрирует общий дружелюбный тон, наверняка убьет, в противном случае, хороший пользовательский опыт, например.
Когда вещи означают одно и то же или выполняют одну и ту же операцию, они должны быть представлены таким же образом, как в случае с электронной почтой Google, Gmail. Исходя из организационного стиля клиентских почтовых приложений, папки Gmail помечаются как «Входящие», «Черновики», «Отправленная почта» и т. Д. Язык, используемый для этих папок, показывает знакомство и согласованность для всех, кто использовал приложения электронной почты в прошлом.
Автор / владелец авторских прав: David Bruce Jr. 2011.Условия авторского права и лицензия: CC BY 2.0
Ярлыки папок в версии 2011 Gmail отображают различные знакомые параметры. Язык, используемый для этих папок, демонстрирует согласованность, поскольку использует метки «Входящие», «Черновики» и «Спам» — все это знакомо любому, кто использовал приложения электронной почты в прошлом.
2. Применение элементов пользовательского интерфейса в том виде, в котором они изначально определены
Элементы пользовательского интерфейса, которые обычно используются, такие как окна сообщений, строки меню, значки, полосы прокрутки и переключатели, представляют собой графические элементы, которые обычно являются согласованными и имеют представления, которые являются широко понятны пользователям.Например, переключатели предназначены для использования, когда разрешена только одна опция. Флажки с другой стороны следует использовать только тогда, когда пользователю разрешено более одного варианта. Во многих отношениях мы можем увидеть, как HTML5 превзошел технологию Flash в конце 2014 года. Одной из причин, возможно, является простота применения и простота использования, которыми могут пользоваться разработчики, дизайнеры и пользователи в результате согласованности и стандартов HTML5 в определяя их элементы пользовательского интерфейса.
Радиокнопки допускают только одну опцию.Следовательно, имеет смысл только для встроенных переключателей HTML работать так же в функциональности.
Флажки позволяют использовать несколько вариантов. Поэтому имеет смысл только для встроенных флажков HTML вести себя так же в функциональности.
Плохой пример последовательности выбора элементов пользовательского интерфейса появляется в разделе комментариев, который раньше использовался на новостном веб-сайте BBC. Комментарии пользователей с наивысшим рейтингом обозначены стрелкой, направленной на юг, однако пользователи должны нажать на стрелку, направленную на север, чтобы увеличить рейтинг комментариев.Использование стрелки на южной стороне для представления комментариев с наивысшей оценкой также не интуитивно понятно; растущие числа идут вверх, а не вниз. Когда пользователи просматривают раздел комментариев веб-страницы, они могут просто действовать в соответствии со стрелками, не читая метки действий, что может привести к неправильному выбору.
Неспособность использовать часто используемые визуальные представления заставит пользователя сознательно взаимодействовать с пользовательским интерфейсом неудобным образом, что снижает скорость, с которой он может перемещаться и выполнять желаемые задачи.
Автор / правообладатель: BBC. Условия авторского права и лицензия: добросовестное использование.
В разделе комментариев BBC отображается стрелка вниз для «Наивысший рейтинг» и стрелка вверх для «Наименьший рейтинг». Это представление является непоследовательным и запутанным для ваших пользователей, поскольку понятие «выше» обычно синонимично со стрелкой вверх, а «снизу» синонимично со стрелкой вниз.
3. Учитывайте различные общепринятые соглашения при принятии решения о планировке.
Это, конечно, спорно, должен ли дизайнер «копировать», как и другие люди, выкладывайте свои веб-сайты или приложения. Однако, когда вы проектируете с учетом перспективы и познания пользователя, важно понимать, что у людей сильная память о том, где вещи визуально расположены на экране. Вы должны использовать эту характеристику, резервируя часто используемые местоположения для различных графических элементов, таких как наличие логотипа в левом верхнем углу, поле поиска в правом верхнем углу, значок выхода в правом верхнем углу и т. Д.
Автор / правообладатель: Microsoft Corporation. Условия авторского права и лицензия: добросовестное использование.
Автор / владелец авторских прав: Apple Inc. Условия авторского права и лицензия: добросовестное использование.
И Microsoft, и Apple размещают свой логотип в левом верхнем углу, а поле поиска — в правом верхнем углу своих веб-сайтов. Эта форма согласованности в макете помогает пользователям чувствовать себя менее ориентированными при просмотре нового и незнакомого сайта.
4. Дизайн для ожиданий вашего пользователя
Убедитесь, что у вас есть те функции и возможности, которые пользователи ожидают увидеть на вашем сайте. Например, сайт авиакомпании должен иметь систему бронирования билетов, а сайт обмена музыкой должен иметь медиаплеер.
Автор / правообладатель: Youtube. Условия авторского права и лицензия: добросовестное использование.
Очевидно, что на таком веб-сайте для обмена видео, как YouTube, должен быть видеоплеер.Это отличный пример последовательности в том, что функции и возможности сайта поддерживают то, что ожидает пользователь.
5. Создайте согласованные визуальные элементы на вашем сайте
Убедитесь, что визуальные элементы согласованы на вашем сайте. Содержание, элементы пользовательского интерфейса, шрифты, фоны и цвета должны быть в гармонии и чувствовать себя согласованными в каждой точке касания. Как упоминалось выше, соблюдение технических соглашений, существующих в форме HTML5 и CSS3, является одним из способов сохранения согласованности.Между тем, наличие руководства по брендингу и стилю, которое необходимо соблюдать, помогает при принятии дизайнерских решений, таких как цвета и шрифты.
Автор / правообладатель: Ян-Альфред Барклай. Behance. Условия авторского права и лицензия: CC BY-NC 4.0
Пример руководства по стилю и руководства по брендингу, разработанного для компании «Goodnyt». Наличие руководства по стилю и брендингу поможет вам убедиться, что ваши визуальные элементы согласованы на всем сайте.
Плохой пример согласованности в выборе цветов и шрифтов можно увидеть в версии 2013 года мобильного пользовательского интерфейса Google Gmail для мобильных устройств. Хотя можно утверждать, что «значение» в этом случае не затрагивается, нельзя отрицать, что пользовательский опыт почти всегда ухудшается в результате каких-либо странных различий в визуальных элементах между экранами.
Автор / владелец авторских прав: Google Inc. Условия авторского права и лицензия: добросовестное использование.
На снимке экрана мобильного пользовательского интерфейса приложения Gmail, когда оно было впервые выпущено в 2013 году, показано несоответствие в выборе цветных рамок и стилей шрифтов.
Take Away
Согласованность и стандарты признаны в качестве основного принципа проектирования и должны применяться ко всему контенту и взаимодействию внутри вашего продукта. Есть несколько аспектов согласованности, на которые мы можем обратить внимание при улучшении наших дизайнов, в том числе язык, который мы используем, элементы пользовательского интерфейса, которые мы выбираем, способ размещения нашего сайта, функции и возможности, которые мы включаем, а также визуальные компоненты мы выбираем как цвет и шрифт.
Хотя согласованность помогает улучшить взаимодействие с пользователем, устраняя ненужное обучение и путаницу для ваших пользователей, важно помнить, что вы должны использовать его при необходимости, но не позволять ему ограничивать инновации в дизайнерских идеях там, где это имеет смысл.
Следовать стандартам и соглашениям и быть последовательным должно быть то, что вы можете использовать в своих интересах. Это освободит вас от относительно тривиальных дизайнерских решений. Это поможет вам сэкономить время и освободить ваш разум, чтобы вы могли еще больше улучшить свой дизайн и удобство работы для ваших пользователей.
Ссылки и где узнать больше
Курс: Шаблоны дизайна пользовательского интерфейса для успешного программного обеспечения:
https://www.interaction-design.org/courses/ui-design-patterns-for-successful-software
Чтобы найти больше информации о «Расширении объяснительной силы эвристики юзабилити» Якоба Нильсена, смотрите:
https: // статический.aminer.org/pdf/PDF/000/089/679/enha …
Чтобы увидеть больше информации о разнице между искусством и дизайном, пожалуйста, смотрите:
http://www.hongkiat.com/blog/design-vs-art/
Чтобы узнать больше о различных аспектах согласованности, см .:
http: //www.sitepoint.com/why-consistency-is-critic …
Чтобы узнать больше о сбалансированности согласованности и инноваций, пожалуйста, смотрите:
http://www.uxmatters.com/mt/archives/2010/07/achie…
Hero Изображение: Автор / Владелец авторских прав: GraphBerry. Девиант Арт. Условия авторского права и лицензия: CC BY-SA 3.0
,