Лучшие практики и принципы разработки графического интерфейса



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



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





Резюме / Параметры Сортировки



принципы




  1. поцелуй.

  2. будьте ясны и конкретны в том, что вариант достигнет: например, используйте глаголы, которые указывают на действие, которое будет следовать за a выбор (см.: осущ. 1).

  3. используйте очевидные действия по умолчанию, соответствующие тому, что пользователь должен/хочет достичь.

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

  5. уменьшить кривую обучения нового пользователя.

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

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

  8. привести ожидания пользователя и пусть ваш программа ведет себя в соответствии с этими ожиданиями.

  9. придерживайтесь словаря и знаний пользователя и не используйте терминологию программиста/реализации.

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


реализация




  1. (см. ответ от paiNie) " попробуйте использовать глаголы в своих диалоговых окнах."

  2. разрешить / реализовать отмену и переделывать.


ссылки




  1. руководство пользователя Windows Vista [http://msdn.microsoft.com/en-us/library/aa511258.aspx]

  2. голландские сайты-руководство" Drempelvrij " [http://www.drempelvrij.nl/richtlijnen]

  3. рекомендации по доступности веб-контента (WCAG 1.0) [http://www.w3.org/TR/WCAG10/]

  4. консистенции [http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0385267746]

  5. Не заставляй меня думать [http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pdbbssr_1?ie=UTF8&s=books&qid=1221726383&sr=8-1]

  6. быть сильным и простым [http://msdn.microsoft.com/en-us/library/aa511332.aspx]

  7. законы гештальт-дизайна [http://www.squidoo.com/gestaltlaws]

623   19  

19 ответов:

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

Это значит использовать

alt text

вместо

alt text

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

--

MC

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

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

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

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

Это из " руководства по человеческому интерфейсу: рабочий стол Apple Интерфейс " (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.

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

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

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

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

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

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

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

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

Comments

    Ничего не найдено.