Рекомендации и принципы проектирования GUI

Каков ваш лучший практичный пользовательский интерфейс или принцип?

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


Резюме/Collation

Принципы

  • ПОЦЕЛУЙ.
  • Быть ясным и конкретным в том, какой вариант будет достигнут: например, использовать глаголы, которые указывают действие, которое будет следовать по выбору (см. Impl. 1).
  • Используйте очевидные действия по умолчанию, соответствующие тем, что пользователь хочет/хочет достичь.
  • Приспосабливать внешний вид и поведение пользовательского интерфейса к среде/процессу/аудитории: автономное приложение, веб-страница, переносной, научный анализ, флеш-игра, профессионалы/дети,...
  • Уменьшить кривую обучения нового пользователя.
  • Вместо того, чтобы отключать или скрывать параметры, подумайте о том, чтобы предоставить полезное сообщение, где пользователь может иметь альтернативы, но только там, где существуют эти альтернативы. Если альтернативы не доступны, лучше отключить этот параметр, который визуально указывает, что этот параметр недоступен, - не скрывайте недоступные параметры, а объясните при всплывании мыши, почему он отключен.
  • Будьте в курсе и согласитесь с практикой и размещением элементов управления, как это реализовано в широко используемых успешных приложениях.
  • Ожидайте ожидания пользователя и позволяйте вашей программе вести себя в соответствии с этими ожиданиями.
  • Придерживайтесь словарного запаса и знаний пользователя и не используйте терминологию программиста/реализации.
  • Следуйте основным принципам дизайна: контрастность (очевидность), повторение (согласованность), выравнивание (внешний вид) и близость (группировка).

Реализация

  • (см. ответ by paiNie) "Попробуйте использовать глаголы в своих диалоговых окнах".
  • Разрешить/выполнить отмену и повтор.

Ссылки

Ответ 2

Я тестирую свой графический интерфейс против моей бабушки.

Ответ 3

Следуйте основным принципам дизайна

  • C ontrast - создавать разные вещи.
  • R epetition - повторите тот же стиль на экране и других экранах
  • A lignment - Элементы экрана линии up! Да, это текст, изображения, элементы управления и метки.
  • P roximity - вместе элементы, связанные с группой. Набор полей ввода для ввода адреса должен быть сгруппирован и быть отличным от группы полей ввода для ввода информации о кредитной карте. Это базовый Законы о дизайне Gestalt.

Ответ 4

Никогда не спрашивайте: "Вы уверены?". Просто разрешите неограниченное, надежное отменить/повторить.

Ответ 5

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

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

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

Ответ 6

Если вы делаете что-либо для Интернета или любого программного обеспечения на переднем плане, на самом деле, вы должны сделать это для себя, чтобы читать...

Не заставляйте меня думать - Стив Круг

Ответ 7

Я пытаюсь адаптироваться к среде.

При разработке для приложения Windows я использую Руководство пользователя для пользователей Windows Vista, но когда я разрабатываю веб-приложение, я использую соответствующие директивы, потому что я разрабатываю голландские веб-сайты, я использую "Drempelvrij" руководящие принципы, которые основаны на Руководства по доступности веб-контента (WCAG 1.0) Консорциума World Wide Web (W3C).

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

Ответ 8

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

Лучший пример: когда кто-то меняет местами кнопки OK и Cancel на некоторых веб-сайтах. Пользователь ожидает, что кнопка OK находится слева, а кнопка Cancel - справа. Короче говоря, когда поведение приложения отличается от того, что пользователь ожидает, что произойдет, у вас возникла проблема с дизайном пользовательского интерфейса.

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

Ответ 9

Панировочные сундуки в webapps:
Tell → The → User → Where → She → В системе

Это довольно сложно сделать в "динамических" системах с несколькими путями к одним и тем же данным, но часто помогает перемещаться по системе.

Ответ 10

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

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

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

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

Этот веб-сайт - еще один пример: вы ничего не можете настроить, и все же мне очень приятно его использовать.

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

Ответ 11

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

Ответ 12

Дизайн повседневных вещей - Дональд Норман

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

-

МС

Ответ 13

При построении сообщений об ошибках сообщение об ошибке ответы на эти 3 вопроса (в указанном порядке):

  • Что случилось?

  • Почему это произошло?

  • Что можно сделать с этим?

Это из "Руководства по человеческому интерфейсу: рабочий стол Apple" Интерфейс "(1987, ISBN 0-201-17753-6), но он может быть использован для любого сообщения об ошибке в любом месте. Существует версия обновленная версия для Mac OS X. Страница Microsoft Сообщения пользовательского интерфейса говорит то же самое: "... в случае сообщения об ошибке, вы должны включить проблему, причину и действие пользователя для исправления проблемы.

Также включать любую информацию, известную программе, а не только фиксированную строку. Например. для "Почему это случилось" часть сообщения об ошибке использует "Файл спектра Raw L:\refDataForMascotParser\TripleEncoding\Q1LCMS190203_01Doub leArg.wiff не существует ", а не просто" File does не существует ".

Сравните это с позорным сообщением об ошибке: "Ошибка СЛУЧИЛОСЬ "..

Ответ 14

(Украден у Джоэля: o))

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

Ответ 15

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

Ответ 16

  • Используйте скрытые/простые анимированные функции для создания плавных переходов из одной секции в другую. Это помогает пользователю создать ментальную карту навигации/структуры.

  • Используйте короткие (по одному слову, если возможно) названия на кнопках, которые четко описывают суть действия.

  • Используйте семантическое масштабирование, где это возможно (хороший пример того, как масштабирование работает на картах Google/Bing, где больше информации видно при фокусировке на области).

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

  • Всегда держите основные узлы вашей структуры видимыми (где это разрешает размер экрана и тип устройства).

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

  • Скрыть элементы, когда вы хотите, чтобы пользователь сосредоточился на данных (например, чтение статьи или просмотр проекта). - однако остерегайтесь пунктов № 5 и № 4.