Лучшие практики и принципы для дизайна GUI

Я тестирую свой GUI против моей бабушки.

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

• Contrast-сделать вещи, которые отличаются посмотреть разные
• Repetition-повторите тот же стиль на экране и для других экранов
• Alignment-линии элементов экрана вверх! Да, это включает текст, изображения, элементы управления и метки.
• Proximity-групповые связанные элементы вместе. Набор полей ввода для ввода адрес должен быть сгруппирован вместе и отличаться от группы полей ввода для ввода информации о кредитной карте. Это основное Законы Дизайна Гештальт -.

никогда спросить "вы уверены?". Просто позвольте неограниченному, надежному undo / redo.

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

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

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

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

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

сухарики в webapps:
Скажите - > Пользователь - > Где - > Она ->в системе

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

--

MC

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

1. Что случилось?

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

3. Что можно с этим поделать?

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

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

сравните это с печально известным сообщением об ошибке: "ошибка случилось.".

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

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

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

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

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

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

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

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

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

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

быть мощным и простым

О, и нанять дизайнера / навыки дизайна. :)

с GUIs, стандарты вид специфической платформы. Например. При разработке GUI в Eclipse это ссылке обеспечивает достойный ориентир.

Я прочитал большую часть из вышеперечисленного и одну вещь, которую я не вижу:

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

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

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

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