Легко усваиваемые подсказки для разработчиков

Каковы некоторые ключевые советы по дизайну интерфейса, которые должен знать каждый разработчик?

Хотя для разработчиков существует ряд ресурсов пользовательского интерфейса (например, Joel Spolsky Дизайн пользовательского интерфейса для программистов), меня интересует больше списка пулей, которые могут быть переданы на 1-2 страницах.

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

Ответ 1

  • используйте стандартную меню (любительские графические дизайнеры, похоже, почему-то намечают свой собственный курс здесь). Убедитесь, что первыми элементами являются "Файл", "Редактировать" и "Просмотр", а последняя - "Справка"
  • не волнуйтесь о цветовых темах или скинах; придерживайтесь стандартного вида, совместимого с вашей платформой.
  • используйте системный шрифт по умолчанию
  • используйте ускорители меню, соответствующие вашей платформе.
  • придерживаться проверенного и правильного макета с помощью строки меню сверху, строки состояния внизу и, если необходимо, навигационной панели слева.
  • никогда не использовать системный захват
  • Если у вас есть выбор, сделайте все окна изменяемыми.
  • используйте группы радиолюбителей для "выбрать ровно один". Всегда убедитесь, что по умолчанию выбран один из них. Если вы хотите, чтобы пользователь не выбрал какой-либо вариант, добавьте еще одну радиокубок для "нет выбора"
  • используйте группы контрольных кнопок для "выбрать нуль или больше"
  • при необходимости сдерживать ввод (т.е. просто игнорировать нецифровые цифры в поле числового ввода), вместо того, чтобы ждать ввода пользователем данных, отправки, а затем вызвать диалог "эй, буквы не допускаются!". Если они не разрешены, не принимайте их в первую очередь.
  • быть либеральным в том, что вы принимаете в качестве входных данных. Ради всего святого, не бросайте подгонку для поля SSN, если они не учитывают дефисы, или ставят тогда, когда вы не хотите их. Компьютер умен, давайте выясним, что xxxxxxxxx и xxx xx xxxx и xxx-xx-xxxx являются действительными номерами социального страхования.
  • всегда допускают пробелы в длинных полях, таких как серийные номера и многое другое. Качество данных идет вверх, если пользователю разрешено группировать номера в наборах из трех или четырех. Если ваша модель данных не может обрабатывать пробелы, вы можете удалить их перед сохранением данных.
  • Избегайте всплывающих диалогов, таких как чума. Никогда не показывайте его, если вы абсолютно не должны. Если вы решите, что хотите, остановитесь и пересмотрите свой дизайн, прежде чем продолжить. Бывают моменты, когда они необходимы, но эти времена значительно реже, чем вы могли себе представить.
  • Обратите внимание на обход клавиатуры. Большинство наборов инструментов делают попытку сделать это правильно, но всегда проверяют дважды. Использование должно иметь возможность использовать клавишу табуляции для логического перехода к виджетам.

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

Лучший пример:

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

Ответ 5

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

Ответ 6

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

Ответ 7

Я думаю, что эта ссылка была бы хорошей отправной точкой из Microsoft "Руководства пользователя для пользователей Windows Vista:
http://msdn.microsoft.com/en-us/library/aa511328.aspx

И это может быть очень близко к списку страниц с двумя страницами, которые вы ищете: "Топ Нарушения":
http://msdn.microsoft.com/en-us/library/aa511331.aspx

Очень близко к земным подсказкам, например: "Установите минимальный размер окна, если есть размер, ниже которого содержимое больше не может использоваться".

Ответ 8

Правильные вкладки-стопы являются обязательными.

Ответ 9

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

Ответ 10

Не увеличивайте "открытость" за счет простой ясности и удобства использования.

Ответ 11

Найдите то, что пользователь будет делать чаще всего, а затем сделайте это проще всего.

Например: у меня длинная личная рукопись с микроволновым дизайном.

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

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

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


2 примера большой микроволновой конструкции

1. 4 части. Дверь, температурный диск, таймер, последовательность освещения

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

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

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

стандартная работа: открыть дверь, нагрузить, повернуть время, закрыть дверь (или, при желании, закрыть дверь сначала, и приготовление начинается, как только > 1 с на часах)

2. 6 частей, дверь, набор, кнопка питания, кнопка пуска, кнопка сброса, цифровой дисплей времени

Кнопка запуска без выбранного времени начинает готовить в течение 1 минуты при высокой мощности.

Кнопка "Пуск" во время приготовления добавляет 1 минуту времени.

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

Нажатие "power" до начала приготовления будет

  • если циферблат не был повернут, скопируйте текущее время, сохраненное в позиции dails, на цифровой таймер.
  • если циферблат был повернут, уменьшает выбор уровня мощности на 1 или, если на самом низком уровне мощности, вернется к самому высокому.

Нажатие на питание при приготовлении снижает уровень мощности на лету.

стандартная операция: 1 минута в высоту = начало нажатия.

1 минута средняя высокая = нажмите кнопку пуска, нажмите кнопку питания.

2 минуты - дважды нажмите кнопку запуска.

< в любое время > в режиме high = повернуть на диск до упора, нажмите кнопку "Пуск" .

<anytime> on & any anypower > поворачивать диск до тех пор, пока он не станет счастливым, нажмите кнопку питания до упора, нажмите кнопку "Пуск" .

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

< предварительно выбранное время + 1 минутa > при высоких значениях = сила нажатия, дважды нажмите кнопку запуска.

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

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

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

Ответ 12

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

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

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

Ответ 13

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

Ответ 14

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

[Ok, Please Cancel my subscription ], [ Please do not cancel my subscription ] 

намного лучше, чем

Cancel my subscription?
[ OK  ] [ Cancel ] 

(эти сбои часто появляются на ежедневной основе)

Ответ 15

  • Свернуть число кликов
  • Единый вид (размер текста, кнопки и другие элементы управления)
  • Минимизировать бесплатные изменения... (например: в записи адреса... укажите состояния в выпадающем списке... и т.д. и т.д.)
  • В раскрывающемся списке стран... сначала укажите страну проживания... (сколько из вас расстроено тем, что США перечислены внизу, и вам нужно прокрутить вниз?)
  • Общие выпадающие списки могут быть заказаны как пользователи.
  • Нет орфографии msitake;) вообще
  • Обратите внимание на текст с надписью: для адреса электронной почты (введите подпись в виде электронной почты... поверьте мне... я видел ее как адрес e_mail:)
  • Символ валюты для сумм. единый цифровой дисплей в количестве.. ex: $ 12.15 == > $12.15 $ 10.9 == > $10.90 9.Прогресс/Строка состояния
  • Ярлык Buddy, чтобы указать поле ошибки, прежде чем пользователь нажмет кнопку OK/Сохранить (например: для адреса электронной почты, если нет "@", нет необходимости ждать, пока пользователь не нажмет OK, а затем сообщите им недействительный адрес электронной почты)
  • Избегайте повторных входов... (например: помните меня на экране входа в систему)
  • глобальное приложение, позволяющее пользователю продолжить работу с того места, где было остановлено в предыдущем экземпляре)
  • при отображении данных в сетке... параметры фильтра стиля excel
  • значения по умолчанию для входов.

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

Ответ 16

Испытание Grandmaw.

Это мой термин для концептуального вопроса: "Может ли ваша бабушка, которая никогда не использовала компьютер за пределами электронной почты и не проверял www.cutecats.com, использовать его?" (Предполагая, что она имеет реальные знания для использования этого конкретного приложения )".

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

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

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

Ответ 17

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

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

Ответ 18

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

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

Ответ 19

Мне нравится следовать этим рекомендациям:

  • Стандарт - следовать известным стандартам/шаблонам, повторно использовать идеи из всех продуктов, которые вы уважаете.
  • Простой - упростите и упростите ваши решения (при необходимости)
  • Элегантный - используйте меньше, чтобы выполнить больше