Принципы и правила проектирования пользовательского интерфейса



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

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

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

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

Делайте это проще, но не примитивнее.

Альберт Эйнштейн

Золотое правило проектировщика гласит: «Никогда не делай другим того, что они сделали тебе. Вспомните, что вам не нравится в программном обеспечении, которым вы пользуетесь. И не делайте того же самого в программе, над которой работаете».

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

Три принципа разработки пользовательского интерфейса формулируются так:

1.Контроль пользователем интерфейса;

2.Уменьшение загрузки памяти пользователя;

3.Последовательность пользовательского интерфейса.

На сегодняшний день данные принципы не совсем подходят для графических пользовательских интерфейсов, однако, в скором будущем они бесспорно будут применяться и получат дальнейшее развитие и распространение. [1]

Первый (краткий) список принципов проектирования принадлежит Элвину Харви Хансен (Alvin Harvey Hansen).

Принципы звучат так:

– знание пользователя;

– сокращение запоминания;

– оптимизация операций;

– устранение ошибок.

В 1984 г. вышла в свет классическая книга по взаимодействию человека и компьютера, содержащая более полный и обобщающий список принципов проектирования. Работа принадлежала Рубинштейну и Хершу (Rubenstein and Hersch), и представляла 93 принципа разработки: от «Проектировщики создают мифы, пользователи создают концептуальные модели» до «Снимайте на видео настоящих, действительных пользователей». [3]

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

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

Правило 1: дайте контроль пользователю

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

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

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

Принципы, которые дают пользователю контроль над системой:

1. Благоразумное использование режимов.

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

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

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

2. Проектируйте гибкий интерфейс, дающий пользователю возможность работать как смышью, так ис клавиатурой, либо их комбинацией.

«Пользователь должен иметь возможность производить действия спрограммой как спомощью мыши, так ис помощью клавиатуры»— так гласитодин из ключевых принципов организации Common User Access (CUA).

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

3. Сфокусируйте внимание пользователя.

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

4. Демонстрация сообщений, окажется полезной ипоможет вработе.

Во всем интерфейсе используйте понятные для пользователя термины. Они не обязаны знать о битах и байтах!

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

5. Необходимы условия для отработки немедленных иобратимых действий, атакже предоставления обратной связи.

Каждый программный продукт должен включать в себя функции отменить и повторить (UNDO/REDO).

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

6. Предоставьте пользователю понятные пути ивозможность ориентироваться

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

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

7. Разработайте систему доступную пользователям сразным уровнем подготовки иразличными навыками.

Не «жертвуйте» опытными пользователями во благо обычных. Вы должны предусмотреть для них быстрый доступ к функциям программы. Не утомляйте их прохождением многочисленных шагов для выполнения какого-либо действия, если они привыкли пользоваться одной макрокомандой. [2]

8. Облегчите работу пользователя синтерфейсом сделав его понятным и «прозрачным».

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

9. Дайте пользователю возможность приспособиться инастроить интерфейс по своему вкусу.

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

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

10. Разрешите пользователю напрямую манипулировать объектами интерфейса.

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

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

11. Позвольте пользователю думать, что он контролирует ситуацию

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

Правило 2: уменьшите нагрузку на память пользователя

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

1. Не загружайте кратковременную память.

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

2. Полагайтесь на распознавание, ане на повторение.

Сообщения, советы по пользованию инструментами, система контекстной помощи, поможет пользователю узнать и выбрать информацию, не вспоминая ее.

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

3. Обеспечьте информирование, благодаря визуальным подсказкам

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

4. Предусмотрите функции отмены последнего действия, его повтора, атакже установки по умолчанию

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

5. Предусмотрите «быстрые» пути.

После достаточно хорошего освоения программного продукта, пользователи испытывают потребность, (которую не стоит игнорировать, однако при разработке следует действовать в соответствии со стандартами) — потребность в ускорителях! [2]

6. Активизируйте синтаксис действий собъектами.

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

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

7. Используйте метафоры из реального мира.

Будьте осторожны при выборе и использовании метафор для интерфейса. Выбрав метафору, зафиксируйте ее и следуйте ей неукоснительно. Если вы обнаружите, что метафора не отвечает своему назначению во всем интерфейсе, выберите новую. Продолжайте метафору, не прерывая ее.

8. Применяйте раскрытие иобъяснение понятий идействий.

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

9. Увеличьте визуальную ясность.

Применяйте принципы визуального проектирования, чтобы человеку было легче воспринимать информацию: группируйте объекты в меню или списке, нумеруйте объекты, используйте заголовки и приглашения.

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

Избегайте случайной группировки и ненужных выделений. Визуальная дезорганизация мешает использованию и восприятию. [3]

Правило 3: сделайте интерфейс совместимым

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

Принципы создания совместимого интерфейса:

1. Проектирование последовательного интерфейса.

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

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

2. Общая совместимость всех программ.

Одним из главных аспектов в разработке интерфейса является возможность обучения пользователя концепциям системы и программного продукта, применяемых на новых ситуациях и в других программах. Проявление совместимости можно отследить на трех уровнях:

– подача информации (подразумевается, что пользователи могут воспринимать информацию и объекты в похожем логическом, визуальном и физическом виде во всем программном продукте;

– поведение программы;

– техника взаимодействия. [5]

3. Сохранение результатов взаимодействия.

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

4. Эстетическая привлекательность ицельность.

Недостаток в функциональности программного продукта не должен быть скрыт приятным для взгляда интерфейсом.

5. Поощрение изучения.

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

Современные интерфейсы — более интуитивно понятны, предсказуемы, дружественны и привлекательны. Возрастание спроса на CD-ROM продукты, нашествие браузеров Internet, домашних страниц и прикладных программ подарило пользователям компьютеров целый мир.

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

Литература:

1. Логунова О. С. Человеко-машинное взаимодействие: теория и практика: Учебное пособие / О. С. Логунова, И. М. Ячиков, Е. А. Ильина. — Ростов: Феникс, 2006. — 285 с.

2. Головач В. Дизайн пользовательского интерфейса / первая книга

3. Купер А., Рейманн Р., Кронин Д., Носсел К. –Интерфейс. Основы проектирования взаимодействия. 4 изд. — Питер, 2017. — 720 с.

4. Тидвелл Д. Разработка пользовательских интерфейсов. 2 изд. — Питер, 2011. -480 с.

5. Акчурин Э. А. Человеко-машинное взаимодействие: Учебное пособие. — Москва: СОЛОН-ПРЕСС, 2009. — 94 с.

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

24. Принципы создания пользовательского интерфейса ПО АСОИУ. Процесс разработки (дизайна) интерфейса

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

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

Если говорить
о самых общих принципах проектирования пользовательских интерфейсов, то можно
назвать три основных положения:

1.                      
Программа должна
помогать выполнить задачу, а не становиться этой задачей.

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

2.                      
При работе с
программой пользователь не должен ощущать себя дураком.

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

3.                      
Программа должна
работать так, чтобы пользователь не считал компьютер дураком.

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

Принципы построения интерфейсов

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

Кошелек Миллера — емкость памяти ограничена семью цифрами

Принцип группировки — Согласно этому правилу, экран программы должен быть разбит на ясно
очерченные блоки элементов, может быть, даже с заголовком для каждого блока.

Бритва Оккама

·        любая задача должна решаться
минимальным числом действий;

·        логика этих действий должна быть
очевидной для пользователя;

·        движения курсора и даже глаз
пользователя должны быть оптимизированы.

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

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

Процесс разработки ПИ разбивается на этапы жизненного
цикла:

1. Анализ трудовой
деятельности пользователя, объединение бизнес-функций в роли.

2. Формулировка требований к
работе пользователя и выбор показателей оценки пользовательского интерфейса.

3. Разработка обобщенного
сценария взаимодействия пользователя с программным модулем (функциональной
модели) и его предварительная оценка пользователями и Заказчиком.

4. Разработка макетов и
прототипов ПИ и их оценка в деловой игре, выбор окончательного варианта.

5. Имплементация ПИ в коде,
создание тестовой версии.

6. Разработка средств
поддержки пользователя (пользовательские словари, подсказки, сообщения, помощь
и пр.) и их встраивание в программный код.

7. тестирование

8. Подготовка
пользовательской документации и разработка программы обучения.

Принципы создания пользовательских интерфейсов — Luxoft Training — Учёба.ру

Я б в нефтяники пошел!

Пройди тест, узнай свою будущую профессию и как её получить.

Химия и биотехнологии в РТУ МИРЭА

120 лет опыта подготовки

Международный колледж искусств и коммуникаций

МКИК — современный колледж

Английский язык

Совместно с экспертами Wall Street English мы решили рассказать об английском языке так, чтобы его захотелось выучить.

15 правил безопасного поведения в интернете

Простые, но важные правила безопасного поведения в Сети.

Олимпиады для школьников

Перечень, календарь, уровни, льготы.

Первый экономический

Рассказываем о том, чем живёт и как устроен РЭУ имени Г.В. Плеханова.

Билет в Голландию

Участвуй в конкурсе и выиграй поездку в Голландию на обучение в одной из летних школ Университета Радбауд.

Цифровые герои

Они создают интернет-сервисы, социальные сети, игры и приложения, которыми ежедневно пользуются миллионы людей во всём мире.

Работа будущего

Как новые технологии, научные открытия и инновации изменят ландшафт на рынке труда в ближайшие 20-30 лет

Профессии мечты

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

Экономическое образование

О том, что собой представляет современная экономика, и какие карьерные перспективы открываются перед будущими экономистами.

Гуманитарная сфера

Разговариваем с экспертами о важности гуманитарного образования и областях его применения на практике.

Молодые инженеры

Инженерные специальности становятся всё более востребованными и перспективными.

Табель о рангах

Что такое гражданская служба, кто такие госслужащие и какое образование является хорошим стартом для будущих чиновников.

Карьера в нефтехимии

Нефтехимия — это инновации, реальное производство продукции, которая есть в каждом доме.

Принципы разработки пользовательского интерфейса — CMS Magazine

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

— Пол Рэнд 

Больше не нужно искать и обзванивать каждое диджитал-агентство

Создайте конкурс на 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/

Принципы веб-дизайна интерфейса пользователя

Эффективный интерфейс пользователя объединяет в себе две составляющие: приятный внешний вид и удобство использования. Чтобы создать такой интерфейс, нужно понимать основы: как пользователь взаимодействует с UI, чего он ожидает и что может стать источником потенциальных проблем. В этой заметке мы рассмотрим принципы проектирования графического интерфейса пользователя, без которых невозможно создание удобного и красивого UI для web’а.

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

1. Знайте своего пользователя

Чем детальнее вы его опишите, тем лучше. Только точно зная, кто ваш пользователь, как и почему он действует, вы сможете создать UI дизайн веб-сайта, который будет работать так, как нужно. Например, вот как определяют своих пользователей в MailChimp:

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

2. Используйте уже известные модели

Об этом легко забыть, но пользователи уже проводят кучу времени в других интерфейсах, будь то Facebook, Gmail или Flickr. Разберитесь, как они устроены и не придумывайте колесо. Используя уже известные модели, вы поможете пользователям быстро разобраться в новом продукте и завоюете их доверие.

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

3. Будьте последовательны

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

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

4. Создавайте визуальную иерархию

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

5. Предоставляйте фидбек и защищайте пользователя от случайных действий

Говорите пользователю, что происходит. Отправилось ли письмо? Загрузился ли файл? Поддерживается ли этот формат изображений? Убедитесь, что нельзя удалить все данные одним нажатием. Пользователю важно знать, что он не остался один на один со своими проблемами. Позаботьтесь, чтобы ему было комфортно.

6. Не показывайте все элементы управления сразу

Это отпугнет неопытного пользователя. Отличный ход — спрятать дополнительные функции, которые могут никогда не понадобиться простому смертному, на вкладке Advanced или в специальном меню:

7. Предоставляйте больше возможностей опытным пользователям

Поверьте, те, кто уже в сотый раз использует сервис, будут благодарны за возможность выполнять рутинные действия с помощью горячих клавиш. Такая функция доступна во множестве известных сервисов — от Google Docs до Github. А вот пример панели с горячими клавишами в сервисе по созданию интеллект-карт Coggle:

8. Не показывайте пользователю пустую страницу

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

В своей книге «Don’t Make Me Think» Стив Круг утверждает: интерфейс должен быть самодостаточным и объяснять сам себя. Если чтобы понять, как пользоваться навигацией, нужна инструкция, — на лицо пример плохого UI.

9. Не усложняйте

Прежде, чем добавить еще один элемент UI, спросите себя, облегчит ли он жизнь пользователя или только заберет у него ценное время. Вот как изменился сайт American Airlines после редизайна (справа):

10. Тестируйте

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

И последнее — когда пользователь приходит на страницу, он не читает ее, а всего лишь пробегается по ней глазами. Поэтому веб-дизайн современного интерфейса пользователя создается с учетом F и Z-паттернов чтения (обратите внимание, что они работают для языков с написанием с лева на право).

F-паттерн работает для сайтов с большим количеством текста — пользователь просматривает верхнюю часть страницы в поиске ключевых слов, потом опускается ниже и пробегается по подзаголовкам:

Поэтому на «тяжелых» сайтах важная информация размещается слева, там, где ее ожидает увидеть пользователь. Этот паттерн используют CNN и New York Times.

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

Описанные выше принципы веб-дизайна пользовательского интерфейса сводятся к следующему: UI должен решать проблемы пользователя самым простым из возможных способов.

Мы, студия stfalcon.com, разрабатываем пользовательские интерфейсы для MVP, сайтов и мобильных приложений и с удовольствием создадим UI, который будет радовать ваших пользователей.

Основные принципы разработки графического пользовательского интерфейса (стр. 1 из 4)

Введение

Правила проектирования пользовательского интерфейса

Правило 1: дать контроль пользователю

Правило 2: уменьшить нагрузку на пользователя

Правило 3: сделать интерфейс совместимым

Руководящие принципы

Программа «Tidy Start Menu»

Заключение

Литература

«Золотое правило проектировщика гласит: «Никогда не делай другим того, что они сделали тебе». Вспомните, что вам не нравится в программном обеспечении, которым вы пользуетесь. И не делайте того же самого в программе, над которой работаете.»

Трэйси Леонард

Почему надо следовать принципам построения пользовательского интерфейса?

Программное обеспечение должно разрабатываться с учетом требований и пожеланий пользователя — система должна подстраиваться к пользователю. Вот почему принципы проектирования столь важны.

Пользователи компьютера могут иметь удачный опыт, который внушит им уверенность в своих силах и укрепит высокую самооценку при работе с компьютером. Их действия с компьютером могут быть охарактеризованы как «успех порождает успех». Каждый позитивный опыт общения с программой позволяет пользователю расширять область знакомства с программным обеспечением и повышать свой уровень компетентности. Хорошо продуманный интерфейс, подобно хорошему учителю и учебникам, обеспечивает плодотворное взаимодействие пользователя и компьютера. Удачные интерфейсы даже способны помочь человеку выйти из привычного круга программ, которыми он пользуется, и открыть новые, углубить понимание работы интерфейсов и компьютеров.

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

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

Три принципа разработки пользовательского интерфейса формулируются так:

1)контроль пользователем интерфейса;

2)уменьшение загрузки памяти пользователя;

3)последовательность пользовательского интерфейса.

Хансен представил первый список принципов проектирования[2]. Принципы таковы:

1)знать пользователя;

2)сократить запоминание;

3)оптимизировать операции;

4)устранить ошибки.

Многие крупные производители операционных систем, выпусти на рынок свои новые продукты, публикуют соответствующие руководства и инструкции. В этих изданиях раскрываются принципы подхода к проектированию интерфейса. Руководства выпускали Apple Computer, Inc. (1992), IBM Corporation (1992), Microsoft Corporation (1995) и UNIX OSF/Motif (1993).

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

«Несовместимость интерфейса может стоить большой компании миллионов долларов убытка из-за потери продуктивности и увеличения стоимости технической поддержки.» — Джесси Брист.

Эти принципы применимы ко всему программному и аппаратному обеспечению, во всех типах и стилях интерфейсов. Вырабатывались они на протяжении довольно длительного времени: производились изыскания в области программного интерфейса, осуществлялись разработки, опрашивались пользователи многих компьютерных платформ, в том числе Macintosh и PC.

Данные принципы выдержали проверку временем и появлением новых компьютерных технологий. Якоб Нильсен заметил: «Принципы останутся основополагающими даже если программа будет иметь футуристичный трехмерный дизайн с печаткой «DataGlove», служащей для ввода, будут распознаваться движения и «живые» видеоизображения. Они будут актуальны, поскольку выражают основную идею диалога с машиной при помощи команд»[8].

Трактовка этих принципов будет зависеть от аппаратного обеспечения, операционной системы, составляющих пользовательского интерфейса и его задач. Зачастую деловое решение довлеет над использованием принципов проектировщиками. Пользовательские модели и модели проектировщика также различны и влияют на то, как будут применяться принципы. На некоторых важных этапах разработки проекта может встать вопрос: «Что произойдет далее?». Ответ должен быть таким: «Что захочет пользователь!».

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

«Делай это проще, но не примитивнее.»

Альберт Эйнштейн

Правило 1: дать контроль пользователю

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

Принципы, которые дают пользователю контроль над системой:

1)использовать режимы благоразумно;

2)предоставить пользователю возможность выбирать: работать либо мышью, либо клавиатурой, либо их комбинацией;

3)позволить пользователю сфокусировать внимание;

4)демонстрировать сообщения, которые помогут ему в работе;

5)создать условия для немедленных и обратимых действий, а также обратной связи;

6)обеспечить соответствующие пути и выходы;

7)приспосабливайте систему к пользователям с различным уровнем подготовки;

8)сделать пользовательский интерфейс более понятным;

9)дать пользователю возможность настраивать интерфейс по своему вкусу;

10)разрешить пользователю напрямую манипулировать объектами интерфейса;

Использовать режимы благоразумно

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

Позволить человеку использовать мышь и клавиатуру

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

Позволить пользователю переключить внимание

Не вынуждать пользователей заканчивать выполнение начатых последовательностей действий. Дать им выбор — аннулировать или сохранить данные и вернутся туда, где они прервались. Пусть у пользователей останется возможность контролировать процесс работы в программе.

Показывать поясняющие сообщения и тексты

Во всем интерфейсе использовать понятные для пользователя термины. Они не обязаны знать о битах и байтах!

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

Обеспечить немедленные и обратимые действия и обратную связь

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

Предоставлять понятные пути и выходы

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

Приспосабливаться к пользователям с разными уровнями навыков

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

Сделать пользовательский интерфейс «прозрачным»

Пользовательский интерфейс — «мифическая» часть программного продукта. При хорошем проекте пользователи даже не ощущают его «присутствия». Если он разработан неудачно, пользователям придется приложить даже немало усилий для эффективного использования программного продукта. Задача интерфейса — помочь людям почувствовать себя находящимся как бы «внутри» компьютера, свободно манипулировать и работать с объектами. Это и называется «прозрачным» интерфейсом!

Основные принципы и правила разработки графического пользовательского интерфейса Текст научной статьи по специальности «Компьютерные и информационные науки»

©

Смирнова М.В.

Студент, Кафедра математики, экономики и информационных технологий, Мурманский арктический государственный университет

ОСНОВНЫЕ ПРИНЦИПЫ И ПРАВИЛА РАЗРАБОТКИ ГРАФИЧЕСКОГО ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА

Аннотация

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

Ключевые слова: графический интерфейс, основные принципы разработки, основные правила разработки.

Keywords: graphical interface, basic design principles, basic design rules.

Основные принципы

Почему надо следовать принципам построения пользовательского интерфейса?

Программное обеспечение должно разрабатываться с учетом требований и пожеланий пользователя — система должна подстраиваться к пользователю. Вот почему принципы проектирования столь важны.

Пользователи компьютера могут иметь удачный опыт, который внушит им уверенность в своих силах и укрепит высокую самооценку при работе с компьютером. Их действия с компьютером могут быть охарактеризованы как «успех порождает успех». Каждый позитивный опыт общения с программой позволяет пользователю расширять область знакомства с программным обеспечением и повышать свой уровень компетентности. Хорошо продуманный интерфейс, подобно хорошему учителю и учебникам, обеспечивает плодотворное взаимодействие пользователя и компьютера. Удачные интерфейсы даже способны помочь человеку выйти из привычного круга программ, которыми он пользуется, и открыть новые, углубить понимание работы интерфейсов и компьютеров.

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

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

Три принципа разработки пользовательского интерфейса формулируются так:

1)контроль пользователем интерфейса;

2)уменьшение загрузки памяти пользователя;

3)последовательность пользовательского интерфейса.

Элвин Хансен[1,323-332] представил первый список принципов проектирования. Принципы таковы:

1)знать пользователя;

2)сократить запоминание;

3)оптимизировать операции;

4)устранить ошибки.

Многие крупные производители операционных систем, выпустя на рынок свои новые продукты, публикуют соответствующие руководства и инструкции. В этих изданиях

© Смирнова М.В., 2016 г.

раскрываются принципы подхода к проектированию интерфейса. Руководства выпускали Apple Computer, Inc. (1992), IBM Corporation (1992), Microsoft Corporation (1995) и UNIX OSF/Motif (1993).

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

Важность соблюдения принципов

«Несовместимость интерфейса может стоить большой компании миллионов долларов убытка из-за потери продуктивности и увеличения стоимости технической поддержки.» -Джесси Брист.

Эти принципы применимы ко всему программному и аппаратному обеспечению, во всех типах и стилях интерфейсов. Вырабатывались они на протяжении довольно длительного времени: производились изыскания в области программного интерфейса, осуществлялись разработки, опрашивались пользователи многих компьютерных платформ, в том числе Macintosh и PC.

Данные принципы выдержали проверку временем и появлением новых компьютерных технологий. Якоб Нильсен заметил: «Принципы останутся основополагающими даже если программа будет иметь футуристичный трехмерный дизайн с печаткой «DataGlove», служащей для ввода, будут распознаваться движения и «живые» видеоизображения. Они будут актуальны, поскольку выражают основную идею диалога с машиной при помощи команд»[2,109-118].

Трактовка этих принципов будет зависеть от аппаратного обеспечения, операционной системы, составляющих пользовательского интерфейса и его задач. Зачастую деловое решение довлеет над использованием принципов проектировщиками. Пользовательские модели и модели проектировщика также различны и влияют на то, как будут применяться принципы. На некоторых важных этапах разработки проекта может встать вопрос: «Что произойдет далее?». Ответ должен быть таким: «Что захочет пользователь!».

Основные правила проектирования пользовательского интерфейса

Правило 1: дать контроль пользователю

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

Принципы, которые дают пользователю контроль над системой:

1)использовать режимы благоразумно

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

2)предоставить пользователю возможность выбирать: работать либо мышью, либо клавиатурой, либо их комбинацией;

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

3)позволить пользователю сфокусировать внимание;

Не вынуждать пользователей заканчивать выполнение начатых последовательностей действий. Дать им выбор — аннулировать или сохранить данные и вернутся туда, где они прервались. Пусть у пользователей останется возможность контролировать процесс работы в программе.

4)демонстрировать сообщения, которые помогут ему в работе;

Во всем интерфейсе использовать понятные для пользователя термины.

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

5)создать условия для немедленных и обратимых действий, а также обратной связи;

Каждый программный продукт должен включать в себя функции UNDO и REDO.

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

6)обеспечить соответствующие пути и выходы;

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

7)приспосабливать систему к пользователям с различным уровнем подготовки;

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

8)сделать пользовательский интерфейс более понятным;

Пользовательский интерфейс — «мифическая» часть программного продукта. При хорошем проекте пользователи даже не ощущают его «присутствия». Если он разработан неудачно, пользователям придется приложить даже немало усилий для эффективного использования программного продукта. Задача интерфейса — помочь людям почувствовать себя находящимся как бы «внутри» компьютера, свободно манипулировать и работать с объектами. Это и называется «прозрачным» интерфейсом!

«Прозрачность» интерфейса обеспечивается тем, что человеку будет дана возможность пользоваться объектами, отличными от системных команд.

9)дать пользователю возможность настраивать интерфейс по своему вкусу;

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

10)разрешить пользователю напрямую манипулировать объектами интерфейса;

Пользователь начинает сомневаться в собственных силах, если прямые манипуляции

с объектами не отвечают их ментальной модели и системе представлений о взаимодействии с реальным миром. Простое правило: увеличивать метафоричность, но не ломать ее. Иногда система прямых манипуляций терпит крах, если пользователь не знает, что надо взять и куда это поместить. Объекты должны «кричать» человеку пользователю: «схвати меня, отпусти меня, обращайся со мною, как с предметом, который я представляю!». Иначе человек не поймет, как работать с этим объектом. Единственная проблема прямых манипуляций — визуально не понятно, может ли объект перемещен и отпущен на экране. Пользователи должны чувствовать себя комфортно при производстве данной операции и знать о предполагаемом результате. Кроме того, необходимо, чтобы интерфейс можно было без труда изучить.

11)позволить пользователю думать, что он контролирует ситуацию.

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

Правило 2: уменьшить нагрузку на пользователя

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

Принципы, позволяющие снизить нагрузку на память пользователя:

1)не загружать кратковременную память;

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

2)полагаться на распознавание, а не на повторение;

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

3)представить визуальные заставки;

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

4)предусмотреть установки по умолчанию, команды Undo и Rendo;

Использовать способность компьютера сохранять и отыскивать информацию о

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

5) обеспечить ярлыки для интерфейса;

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

6)активировать синтаксис действий с объектами;

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

7)использовать метафоры из реального мира;

Быть осторожным при выборе и использовании метафор для интерфейса. Выбрав метафору, зафиксировать ее и следовать ей неукоснительно. Если получится, что метафора не отвечает своему назначению во всем интерфейсе, то выбрать новую. Продолжать метафору, не прерывая ее.

8)применять раскрытие и объяснение понятий и действий;

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

9)увеличить визуальную ясность.

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

Правило 3 : сделать интерфейс совместимым

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

Принципы создания совместимости интерфейса:

1)проектирование последовательного интерфейса;

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

2)общая совместимость всех программ;

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

3)сохранение результатов взаимодействия;

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

4)эстетическая привлекательность и цельность;

Принятый для взгляда интерфейс не должен скрывать недостаток функциональности программного продукта. Пользователи не должны видеть «губной помады на бульдоге», они должны получить красивый интерфейс, который поможет им в работе.

5)поощрение изучения;

Интерфейсы сегодняшнего и завтрашнего дня — более интуитивны, предсказуемые, дружественные, привлекательные. Нашествие CD/DVD-ROM продуктов и браузеров Internet, домашних страниц и прикладных программ открыло целый мир для пользователей компьютера. Наступило время превращения дружественных интерфейсов в приятные в использовании и завлекающие интерфейсы почти во всех программах.

Литература

1. Хансен, W. — Пользователь, принципы разработки интерактивных систем. AFIPS Conference Proceedings 39. — 1971 — С. 323-332.

2. Нильсен, Якоб. — Традиционный диалог дизайна, современные пользовательские интерфейсы. Communication of the ACM 33(10). — 1990 — С. 109-118.

4 золотых правила дизайна пользовательского интерфейса

Пользовательский интерфейс (UI) является важной частью любого программного продукта. Когда все сделано хорошо, пользователи этого даже не замечают. Когда все сделано плохо, пользователи не могут обойтись без этого, чтобы эффективно использовать продукт. Чтобы увеличить шансы на успех при создании пользовательских интерфейсов, большинство дизайнеров следуют принципам проектирования интерфейсов. Принципы проектирования интерфейсов представляют собой высокоуровневые концепции, которые используются для разработки программного обеспечения. В этой статье я поделюсь несколькими фундаментальными принципами.Они основаны на «10 эвристиках юзабилити для дизайна пользовательского интерфейса» Якоба Нильсена, «Восьми золотых правилах дизайна интерфейсов» Бена Шнейдермана и «Принципах дизайна взаимодействия» Брюса Тоньяццини. Большинство принципов применимо к любым интерактивным системам — традиционным средам графического интерфейса пользователя (таким как настольные и мобильные приложения, веб-сайты) и интерфейсам без графического интерфейса пользователя (например, системам голосового взаимодействия).

Принципы разработки пользовательского интерфейса:

1. Предоставьте пользователям возможность управлять интерфейсом
2. Сделайте удобное взаимодействие с продуктом
3. Снизьте когнитивную нагрузку
4. Сделайте пользовательский интерфейс согласованным

1.Предоставьте пользователям возможность управлять интерфейсом

Хорошие пользовательские интерфейсы создают ощущение
контроль в своих пользователях. Сохранение контроля над пользователями делает их удобными; Они
быстро научится и быстро обретет чувство мастерства.

Сделайте действия обратимыми — прощайте

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

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

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

Создание удобного интерфейса

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

• Обеспечить визуальные подсказки . Визуальные подсказки служат напоминанием для пользователей. Позвольте пользователям легко перемещаться по интерфейсу, предоставляя ориентиры при перемещении по интерфейсу продукта. Заголовки страниц, выделение выбранных в данный момент параметров навигации и другие наглядные пособия позволяют пользователям сразу увидеть, где они находятся в интерфейсе.Пользователь никогда не должен задаваться вопросом: «Где я?» или «Как я попал на этот экран?»
• Предсказуемость . Пользователям должны быть предоставлены подсказки, которые помогут им предсказать результат действия. Пользователь никогда не должен задаваться вопросом: «Что мне нужно нажать, чтобы выполнить свою задачу?» или «Для чего эта кнопка?»

Четкий и наглядный рабочий процесс способствует выполнению задач.
Изображение предоставлено Designmodo.

Обеспечьте информативную обратную связь — будьте признательны

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

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

Обратная связь подтверждает, что действие выполнено успешно.
GIF от Колина Гарвена.

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

Пользователь видит зеленую галочку, когда требование пароля удовлетворено.
GIF от Эммануэля Торреса

Показать статус системы

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

Хороший интерфейс
может утешить пользователей, показывая прогресс, пока система выполняет задачу.
Dropbox показывает статус загрузки документа: текущий прогресс и
количество оставшегося времени.

Для пользователей с разным уровнем квалификации

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

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

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

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

Удалите все элементы, которые не помогают вашим пользователям

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

Хорошим примером приложения, которое следует подходу «меньше значит больше», избегая перегрузки интерфейса контентом или функциями, является iA Writer.

Изображение от iA Writer

Интерфейс приложения iA Writer представляет собой чистый лист для набора текста без отвлекающих факторов.Это позволяет пользователям сосредоточиться на том, что они пишут, и скрывает все остальное.

Не запрашивать у пользователей данные, которые они уже ввели

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

Избегайте жаргона и системных терминов

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

Используйте повседневный язык, а не язык систем или разработчика.
Изображение от Think With Google

Применение закона Фиттса к интерактивным элементам

Фиттса
Закон гласит, что время нахождения цели зависит от расстояния.
к и размер цели. Это означает, что лучше разрабатывать большие цели.
для важных функций (с большими кнопками легче работать).

D — расстояние от начальной точки курсора; W — ширина цели (закон Фиттса). Изображение от Apple

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

Конструкция доступных интерфейсов

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

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

Использование метафор реального мира

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

Хорошие метафоры создают сильную
связь с прошлым опытом из реального мира в умах пользователей. Рециркуляция
Значок корзины на Mac похож на фактическую корзину, и он показывает, есть ли в ней файлы
в этом.

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

Изображение Рамакриша

Инженер для ошибок

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

Хороший интерфейс содержит точные, вежливые и конструктивные сообщения об ошибках.

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

Лучшие проекты имеют отличную погрешность
восстановление, пытаясь помешать пользователям совершать эти ошибки в первую очередь
место. Функция предотвращения ошибок в Gmail показывает всплывающее окно, если пользователи забывают вставить
вложение после ссылки.

Защитить работу пользователя

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

3. Снизить когнитивную нагрузку

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

Разделение на части для последовательностей информации или действий

In
В 1956 году психолог Джордж Миллер познакомил мир с теорией
дробление. В своих работах Миллер говорит, что рабочая память человека может справиться с
семь плюс-минус два «фрагмента» информации, пока мы обрабатываем
Информация.

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

Проще сканировать и вводить фрагменты чисел вместо целого числа.

Уменьшить количество действий, необходимых для выполнения задачи

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

Признание превыше отзыва

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

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

Изображение предоставлено Google Hangouts

Повышение четкости изображения

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

При разработке макетов:

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

4. Обеспечьте согласованность пользовательских интерфейсов

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

Визуальная согласованность (стиль)

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

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

Функциональная согласованность (поведение)

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

Соответствует ожиданиям пользователей

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

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

Корзина — это привычная терминология; Торговый центр не является и может запутать интернет-покупателей.

Заключение

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

Основные принципы проектирования пользовательского интерфейса

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

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

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

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

Эти 14 принципов дизайна пользовательского интерфейса порадуют ваших пользователей — людей, которые используют ваш продукт, веб-сайт или приложение.

1. Поместите пользователя в центр

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

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

2. Стремление к ясности

Назначение пользовательского интерфейса — позволить пользователю взаимодействовать с веб-сайтом или приложением (или, в более широком плане, с любым продуктом). Избегайте всего, что сбивает людей с толку или не помогает им взаимодействовать.

3. Минимизируйте действия и шаги на экране

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

Держите основное действие впереди и в центре, а второстепенные действия перемещайте глубже на странице или придайте им меньший визуальный вес.

4. Простота

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

Пользовательский интерфейс должен быть простым и элегантным.

5. Будьте последовательны

Согласованность создает знакомство, и знакомые интерфейсы, естественно, более удобны. Насколько неприятно было бы сесть за руль автомобиля, когда тормоз находится справа, а акселератор — слева? Или заполните веб-форму с красной кнопкой «Отправить» и зеленой кнопкой «Удалить».

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

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

Дизайн-система — отличный способ обеспечить единообразие дизайна пользовательского интерфейса.

6. Ваша цель: сделать дизайн пользовательского интерфейса невидимым

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

7. Обеспечьте полезную обратную связь

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

Обратная связь помогает ответить на вопросы в четырех областях:

1. Расположение: Вы здесь.
2. Статус: Что происходит? Это все еще продолжается?
3. Будущий статус: что дальше?
4. Результаты и результаты: Эй, что случилось?

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

8. Снижение когнитивной нагрузки

Многие из этих принципов проектирования пользовательского интерфейса служат для снижения когнитивной нагрузки на пользователей.По сути, не заставляйте пользователей думать (тоже полезный принцип UX-дизайна). Есть несколько распространенных способов снизить когнитивную нагрузку и упростить использование вашего веб-сайта или приложения:

• Действия и информация с фрагментами. Большинство людей могут обрабатывать семь плюс-минус два фрагмента информации при их обработке. Например, разделение телефонных номеров обычным способом 3-3-4, а не 10-значной последовательностью, приводит к меньшему количеству ошибок.
• Запомните правило трех щелчков мышью — для поиска информации не требуется более трех щелчков мышью
• Минимизируйте отзыв в пользу распознавания — общие изображения и значки в контексте помогают пользователям определить функциональность, подумать о корзине и колокольчике значки (обычно используются для уведомлений) и другие часто используемые значки, которые запускают уже существующую память.Это также означает, что не следует брать широко используемый значок, который понимает большинство людей, а затем использовать его для обозначения чего-то еще, вы просто запутаете людей.

9. Сделайте его доступным

Дизайн пользовательского интерфейса должен учитывать проблемы доступности. В сети это часто означает обеспечение доступа к продукту и его использования для лиц с нарушениями зрения. Не забывайте и о дальтонизме. Примерно 1 из 12 мужчин (это примерно 8%) и 1 из 200 женщин (примерно 0,5%) в той или иной степени страдают дальтонизмом.Используйте цвет, чтобы подчеркнуть и подчеркнуть, но не полагайтесь исключительно на цвет для передачи информации.

10. Включите отзывы пользователей в пользовательский интерфейс

Не создавайте дизайн в вакууме. Тестируйте и проверяйте варианты пользовательского интерфейса, собирая отзывы пользователей. Наблюдайте, как пользователи пытаются использовать ваш дизайн (без наставничества). Они сбиты с толку? Могут ли они легко достичь желаемого результата? Делайте это как в процессе проектирования, так и постоянно оценивайте после запуска (тепловые карты — один из способов отследить, насколько эффективен пользовательский интерфейс).

11. Гибкость

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

12. Визуальная структура

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

13. Диалоги должны завершиться

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

14. Обеспечьте четкий следующий шаг

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

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

Принципы разработки пользовательского интерфейса

главных принципов дизайна пользовательского интерфейса, о которых нужно помнить | Ольга Щорс

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

Естественность

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

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

Согласованность

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

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

Дружественность

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

Даже с хорошо разработанным пользовательским интерфейсом пользователи могут совершать определенные ошибки.Эти ошибки могут быть либо «физического» типа (случайный выбор команды или данных), либо логического (неправильное решение о выборе команды или данных). Как говорится в книге Бена Шнейдермана «Восемь золотых правил проектирования интерфейсов», дружественный интерфейс должен позволять предотвращать ситуации, которые могут привести к ошибкам. Дизайн пользовательского интерфейса также должен уметь адаптироваться к потенциальным ошибкам пользователя и облегчать процесс устранения последствий таких ошибок.

Ясность

Ясность — одна из ключевых характеристик, которыми должен обладать любой интерфейс.Бен Шнейдерман также считает, что для того, чтобы интерфейс был эффективным и удобным, он должен быть узнаваемым, предсказуемым и иметь очевидную цель.

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

Взаимодействие

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

Прозрачность

Очень легко переборщить и добавить ненужные слои в интерфейс: дополнительные кнопки, графика, параметры, окна, вложения. Пользователь должен будет пройти через все это, чтобы добраться до сути.Чтобы этого избежать, дизайн пользовательского интерфейса должен быть нацелен на прямой контроль и естественность.

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

Сильная визуальная иерархия

В статье Tubik Studio объясняется, что такое сильная визуальная иерархия и как она помогает пользователю понять порядок, в котором должны просматриваться визуальные элементы на экране. Он позволяет задавать последовательность и плавно направлять взгляд пользователя с одного элемента интерфейса на другой.При слабой визуальной иерархии интерфейс выглядит перегруженным и запутанным.

Пошаговый поток информации

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

Невидимость

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

Итог

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

Биография автора

Автор: Лена Иванова

Лена Иванова — специалист по маркетингу в Redwerk Компания по разработке программного обеспечения с обширным опытом работы в ИТ-индустрии.

Принципы разработки пользовательского интерфейса | by Aman Sahota

«

Проектировать — это гораздо больше, чем просто собирать, заказывать или даже редактировать; он должен добавлять ценность и смысл, освещать, упрощать, уяснять, изменять, возвеличивать, драматизировать, убеждать и, возможно, даже развлекать. ”- Пол Рэнд

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

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

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

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

Мы живем в мире отвлекающих факторов.

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

Прямое манипулирование (DM) — это стиль взаимодействия, при котором пользователи взаимодействуют с объектами на экране, используя физические, инкрементные, обратимые действия, эффекты которых сразу видны на экране.

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

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

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

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

Взаимодействие должно быть частым.

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

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

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

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

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

https://dribbble.com/bazentalks

Джон Маеда, автор книги «Законы простоты», говорит, что «разумная организация многих элементов экрана может сделать их менее загроможденными».

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

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

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

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

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

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

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

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

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

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

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

https://blog.prototypr.io/@justinramedia

Дизайн интерфейса успешен, когда люди используют то, что вы разработали. Речь идет как о создании среды для использования, так и о создании артефакта, который стоит использовать. Интерфейс недостаточно, чтобы удовлетворить эго своего дизайнера: его нужно использовать!

Что делает хороший пользовательский интерфейс? 13 принципов дизайна пользовательского интерфейса | by Inkbot Design

Что делает хороший пользовательский интерфейс? 13 принципов дизайна пользовательского интерфейса

Креативная графика, привлекательный дизайн логотипа или замысловатая анимация? Что отличает хороший пользовательский интерфейс?

Определение эффективного пользовательского интерфейса очень расплывчато и обычно содержит такие слова, как ясный, последовательный, простой и ориентированный на пользователя.Но что это на самом деле означает?

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

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

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

UI — это не привлекательная графика и дизайн элементов. Пользовательский интерфейс определяет взаимодействие между пользователем и продуктом.

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

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

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

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

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

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

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

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

Вам также может понравиться: The Ultimate Guide to Color Psychology in Branding

Хорошо продуманный пользовательский интерфейс имеет приоритетное значение.

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

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

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

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

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

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

Проблема согласованности постоянна при хорошем дизайне пользовательского интерфейса.

Это касается всего: от цветов, иконок и шрифтов до размещения меню и кнопок.

Проблема становится еще более серьезной, если требуются изменения, а дизайнеры, работавшие над первой версией, больше не доступны.

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

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

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

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

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

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

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

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

Вот почему иерархия — это внутренняя часть успешного пользовательского интерфейса.

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

Несмотря на то, что это немного противоречиво по отношению к другим, этот момент очень важен.

Вам также могут понравиться: 7 проверенных стратегий для создания изображений, оптимизированных для SEO

Хороший пользовательский интерфейс — это тот, который привлекателен и отражает индивидуальность бренда.

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

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

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

Более того, визуальный аспект пользовательского дизайна должен усиливать функциональность.

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

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

Интерфейс должен быть разработан таким образом, чтобы он мог быстро решать любые проблемы.

Пользователь случайно удалил важный файл? Предложите способ его быстрого восстановления.

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

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

Они основаны на проактивном подходе и предвидят потребности конечных пользователей.

Возьмем, к примеру, электронную коммерцию.

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

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

Превратить упреждающий подход в обледенение тщательно разработанного пользовательского интерфейса — это всегда хорошая идея.

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

Такие элементы делают интерфейс более интуитивным и удобным.

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

Цель дизайнеров — помочь пользователям с первого взгляда понять, где они могут найти такие возможности и предусмотрены ли такие функции.

Удержание пользователей — основная задача и одновременно основная борьба любого цифрового продукта.

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

Вам также могут понравиться: Лучшие приложения для рисования для iPad и iPhone

Хорошая практика для очень сложных решений — создавать советы по адаптации и показывать их клиентам.

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

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

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

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

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

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

Следование основным и хорошо известным стандартам дизайна для Android от Google и iOS от Apple — хорошая идея.

Например, возьмем строку поиска.

Перемещать его сверху вниз — не лучшая идея.

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

Создать красивый пользовательский интерфейс просто.

Создание функционального и удобного интерфейса — это совсем другая история.

Итак, повторим все, что вы узнали.

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

• четко определенная целевая аудитория
• интуитивная навигация пользователя
• согласованность во всем цифровом продукте
• обратная связь по действиям пользователя
• знакомые элементы пользовательского интерфейса
• иерархический порядок элементов
• привлекательных визуальных эффектов
• дизайн создан для людей
• проактивный подход
• все функции легко доступны
• включены советы и рекомендации
• ограниченное количество жестов
• соответствие стандартам дизайна

Эти советы и подходы используются ведущими цифровыми компаниями, такими как Apple и Google.

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

Автор Биография: Ана Ластовецкая — технический писатель в компании MLSDev, украинской компании по разработке мобильных и веб-приложений. Она занимается исследованиями в области технологий для создания обучающего контента по различным темам, включая разработку приложений, дизайн UX / UI, технические и бизнес-консультации и т. Д. Возможность предоставлять информацию людям, которые хотят больше узнать об ИТ и процессах разработки приложений. это то, что вдохновляет Ану.Вы можете связаться с ней через LinkedIn или написать по адресу [email protected].

Рекомендации по проектированию пользовательского интерфейса: 10 практических правил

Научитесь разрабатывать с учетом потребностей и ожиданий вашего пользователя, применяя Десять рекомендаций по пользовательскому интерфейсу Якоба Нильсена и Рольфа Молиха. Эта эвристика нашла отражение во многих продуктах, разработанных некоторыми из самых успешных компаний в мире, такими как Apple, Google и Adobe. Дополнительное свидетельство того, как их проектные группы включают эти правила в свой процесс проектирования, отражено в руководствах по пользовательскому интерфейсу, опубликованных и распространенных этими компаниями.В этой статье вы узнаете, как следовать десяти эмпирическим правилам при проектировании, чтобы вы могли еще больше повысить удобство использования, полезность и желательность своих дизайнов.

10 рекомендаций Нильсена и Молиха по дизайну пользовательского интерфейса

Якоб Нильсен, известный консультант по веб-юзабилити и партнер Nielsen Norman Group, и Рольф Молич, другой известный эксперт по юзабилити, составили список из десяти руководств по дизайну пользовательского интерфейса в 1990-х годах. Обратите внимание, что эвристика Нильсена и Молиха во многом пересекается с «восемью золотыми правилами» Бена Шнейдермана.Эти 10 практических правил являются продолжением восьми золотых правил Шнейдермана через 4 года после первой публикации Шнейдермана.

• Видимость состояния системы . Пользователи всегда должны быть проинформированы о работе системы с понятным и хорошо заметным статусом, отображаемым на экране в течение разумного периода времени.
• Соответствие системы и реального мира . Дизайнеры должны стремиться отражать язык и концепции, которые пользователи могут найти в реальном мире, в зависимости от того, кем являются их целевые пользователи.Представление информации в логическом порядке и совмещение ожиданий пользователей, основанных на их реальном опыте, снизят когнитивное напряжение и упростят использование систем.
• Контроль и свобода пользователя . Предложите пользователям цифровое пространство, где возможны обратные шаги, включая отмену и повтор предыдущих действий.
• Согласованность и стандарты . Разработчики интерфейсов должны гарантировать, что и графические элементы, и терминология поддерживаются на одинаковых платформах.Например, значок, представляющий одну категорию или концепцию, не должен представлять другую концепцию при использовании на другом экране.
• Предотвращение ошибок . По возможности проектируйте системы так, чтобы возможные ошибки были сведены к минимуму. Пользователи не любят, когда их призывают выявлять и устранять проблемы, которые иногда могут выходить за рамки их уровня знаний. Устранение или отметка действий, которые могут привести к ошибкам, — два возможных способа предотвращения ошибок.
• Узнавание, а не отзыв. Сведите к минимуму когнитивную нагрузку, сохраняя релевантную для задачи информацию на дисплее, пока пользователи исследуют интерфейс. Человеческое внимание ограничено, и мы способны одновременно поддерживать только около пяти элементов в нашей кратковременной памяти. Из-за ограничений кратковременной памяти дизайнеры должны гарантировать, что пользователи могут просто использовать распознавание вместо того, чтобы вспоминать информацию по частям диалога. Распознать что-либо всегда легче, чем вспомнить, потому что распознавание включает в себя восприятие сигналов, которые помогают нам проникнуть в нашу обширную память и позволяют всплыть на поверхность релевантной информации.Например, мы часто находим в тесте более простой формат вопросов с несколькими вариантами ответов, чем вопросы с короткими ответами, потому что он требует от нас только распознать ответ, а не вспоминать его из своей памяти.
• Гибкость и эффективность использования . С увеличением использования возникает потребность в меньшем количестве взаимодействий, что обеспечивает более быструю навигацию. Это может быть достигнуто с помощью сокращений, функциональных клавиш, скрытых команд и макросов. Пользователи должны иметь возможность настраивать или адаптировать интерфейс в соответствии со своими потребностями, чтобы частые действия можно было выполнять более удобными способами.
• Эстетичный и минималистичный дизайн . Сведите к минимуму беспорядок. Вся ненужная информация конкурирует за ограниченные ресурсы внимания пользователя, что может препятствовать поиску пользователем в памяти соответствующей информации. Следовательно, отображение должно быть сокращено до только необходимых компонентов для текущих задач, обеспечивая при этом четко видимые и однозначные средства перехода к другому контенту.
• Помогите пользователям распознавать, диагностировать и устранять ошибки .Разработчики должны исходить из того, что пользователи не могут понять техническую терминологию, поэтому сообщения об ошибках почти всегда должны быть выражены простым языком, чтобы ничего не потерялось при переводе.
• Справка и документация . В идеале мы хотим, чтобы пользователи перемещались по системе, не прибегая к документации. Однако в зависимости от типа решения может потребоваться документация. Когда пользователям требуется помощь, убедитесь, что ее легко найти, она соответствует поставленной задаче и сформулирована таким образом, чтобы помочь им сделать необходимые шаги для решения проблемы, с которой они сталкиваются.

Google Inc., технологическая компания с многомиллиардным оборотом, безусловно, производит проекты, которые отражают вышеперечисленные эвристики. Джон Уайли, главный дизайнер Google Search в 2012 году, однажды сказал:

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

10 рекомендаций Нильсена и Молиха по пользовательскому интерфейсу довольно хорошо охватывают эти три ключевых компонента пользовательского опыта, а это означает, что вы, вероятно, сможете улучшить пользовательский опыт своих проектов, следуя этим рекомендациям!

Узнайте, как Adobe объединяет десять рекомендаций по дизайну пользовательского интерфейса Nielsen и Molich.

Adobe Systems Incorporated, крупная североамериканская компания, производящая программное обеспечение, является прекрасным примером того, как дизайн, отражающий десять рекомендаций Nielsen и Molich по пользовательскому интерфейсу, может привести к успеху компании .Один из их самых популярных продуктов, Adobe Photoshop, редактор растровой графики, демонстрирует характеристики хорошо продуманного пользовательского интерфейса, который отражает эти рекомендации.

Мы более подробно рассмотрим, как Adobe Photoshop отражает каждое из этих руководящих принципов, чтобы вдохновить вас улучшить удобство использования, полезность и желательность ваших собственных дизайнов, включив 10 практических правил в свою работу.

1. Видимость состояния системы

Photoshop отлично справляется с задачей, позволяя пользователю узнать, что происходит с программой, визуально показывая пользователю, к чему привели его действия, когда это возможно.Например, когда пользователи перемещают слои в палитре «Слои», они могут визуально видеть слой, представленный как физически перетаскиваемый в пространстве.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Изображение курсора переходит от раскрытой руки к зажатой, когда пользователь перетаскивает слой внутри палитры слоев. Это упрощает мгновенное понимание состояния системы.Кроме того, выбор Adobe использования «руки» — отличный пример второго правила, согласно которому система соответствует реальному миру.

2. Соответствие системы реальному миру

Пример Photoshop, имитирующего реальный мир в терминах и представлениях, понятных их целевым пользователям, — это то, где они разрабатывают информационную структуру и терминологию, отражающую те же формулировки, которые мы использовали бы в мир фотографии или печатных СМИ. Знакомые концепции и термины, такие как RGB, Hue / Saturation / Brightness и CMYK, используются для представления цвета, в то время как различные инструменты, такие как Dodge Tool и Burn Tool, имитируют традиционную технику фотолаборатории для фотографий.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Инструменты Dodge Tool и Burn в Photoshop имитируют традиционную технику фотолаборатории для фотографий

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

В Photoshop используется термин «Экспозиция», который обычно используется в мире фотографии.

3. Пользовательский контроль и свобода

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Все в руках пользователей, поскольку они могут сделать шаг назад или шаг вперед в меню «Правка» или, в качестве альтернативы, они могут использовать сочетания клавиш Photoshop, например, Alt + Ctrl + Z.

4. Согласованность и стандарты

Photoshop поддерживает стандартный макет и внешний вид, когда дело касается строки меню. Они также используют общеизвестные термины, такие как «Новый…», «Открыть…», «Сохранить как…» и т. Д.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Меню «Файл» в Photoshop отображает множество хорошо знакомых параметров.

5.Предотвращение ошибок

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Пользователь наводит курсор на значок ластика, и Photoshop отображает ярлык «Инструмент ластика».

6.Распознавание, а не вызов

Независимо от того, делает ли он выбор из меню художественных фильтров или открывает новый файл изображения, Photoshop предоставляет пример просмотра, чтобы пользователи могли сделать правильный выбор. Это позволяет пользователю визуально распознать то, что он ищет, вместо того, чтобы вспоминать имя или вводить его для поиска. Возможно, вы встречали другие программы для редактирования фотографий, которые просят вас вспомнить и ввести имя файла, с которым вы хотите работать. Это действительно может быть действительно трудно вспомнить, поскольку часто это что-то вроде: 29412_09342.JPG.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Пользователь может визуально распознать изображение заката по его миниатюре и выбрать его.

7. Гибкость и эффективность использования

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

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

8. Эстетичный и минималистичный дизайн

Панель инструментов в Photoshop отображает только значки и аккуратно спрятана в сторону, чтобы свести к минимуму беспорядок и сохранить эстетику минимализма.

Автор / правообладатель: Adobe Systems Incorporated.Условия авторских прав и лицензия: Добросовестное использование

Панель инструментов Photoshop минималистична и позволяет избежать беспорядка, поскольку инструменты представлены только значками.

9. Помогите пользователям распознать, диагностировать и исправить ошибки

При возникновении ошибки Photoshop предоставляет диалог, который позволяет пользователю узнать, что пошло не так и как ее исправить.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

В этом сообщении об ошибке из-за неправильного использования штампа клонирования пользователем Photoshop объясняет, что пошло не так, почему и как пользователю следует действовать дальше.

10. Справка и документация

Справка и документация легко доступны через строку главного меню. Здесь вы можете найти множество разделов справки и руководств о том, как в полной мере использовать программу.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

В окне отображается информация о том, как создавать ролловеры в контексте веб-графики. Пользователь также может видеть список тем в боковом меню.

10 шагов к повышению удобства использования, полезности и желательности путем внедрения рекомендаций Нильсена и Молиха по проектированию пользовательского интерфейса

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

Скачать PDF можно здесь .

На вынос

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

Где узнать больше

Чтобы найти дополнительную информацию о книге Якоба Нильсена «Повышение объяснительной силы эвристики юзабилити», перейдите по ссылке:

https: // static.aminer.org/pdf/PDF/000/089/679/enha …

Ссылки и где узнать больше

Изображение героя: Автор / Правообладатель: Барри Шварц. Flickr. Условия авторских прав и лицензия: CC BY-NC 2.0

Курс: Шаблоны проектирования пользовательского интерфейса для успешного программного обеспечения:
https://www.interaction-design.org/courses/ui-design-patterns-for-successful-software

.