Легко усваиваемые советы для разработчиков
Какие основные советы по дизайну пользовательского интерфейса должны знать каждый разработчик?
Несмотря на то, что для разработчиков имеется ряд ресурсов пользовательского интерфейса (например, " Дизайн пользовательского интерфейса для программистов" Джоэла Спольски), меня интересует еще один список, который можно разместить на 1-2 страницах.
Я заинтересован в более тактических, повседневных советах по пользовательскому интерфейсу, в отличие от всеобъемлющих целей проектирования пользовательского интерфейса, которые будут рассмотрены на совещании по проектированию пользовательского интерфейса (предположительно, при участии по крайней мере одного человека с хорошим чувством пользовательского интерфейса). Совокупность этих советов может охватывать около 80% случаев, с которыми сталкивается каждый день программист.
19 ответов
- используйте стандартную строку меню (по какой-то причине любители-дизайнеры с графическим интерфейсом предпочитают наметить здесь свой курс). Убедитесь, что первыми элементами являются "Файл", "Редактировать" и "Просмотр", а последним - "Справка".
- не беспокойтесь о цветовых темах или скинах; придерживайтесь стандартного внешнего вида, соответствующего вашей платформе
- использовать системный шрифт по умолчанию
- использовать ускорители меню, соответствующие вашей платформе
- придерживайтесь проверенного и верного макета со строкой меню вверху, строкой состояния внизу и, при необходимости, панелью навигации слева
- никогда не делать общесистемный захват
- Если у вас есть выбор, сделайте все окна изменяемого размера.
- используйте группы радиокнопок для "выберите ровно одну". Всегда убедитесь, что один из них выбран по умолчанию. Если вы хотите, чтобы пользователь мог не выбирать ни одного, добавьте еще одну кнопку "Нет выбора".
- используйте группы кнопок для выбора "выбрать ноль или более"
- при необходимости ограничьте ввод (т. е. просто игнорируйте нецифровые символы в числовом поле ввода), вместо того, чтобы ждать, пока пользователь введет данные, отправьте, а затем вызовите диалоговое окно с надписью "эй, буквы не разрешены!". Если они не разрешены, не принимайте их в первую очередь.
- быть либеральным в том, что вы принимаете в качестве вклада. Ради бога, не бросайте фитинг для поля SSN, если они пропускают дефисы, или вставляйте их тогда, когда они вам не нужны. Компьютер умный, пусть он выяснит, что xxxxxxxxx и xxx xx xxxx и xxx-xx-xxxx - все действительные номера социального страхования.
- всегда допускайте пробелы в длинных полях, таких как серийные номера и еще много чего. Качество данных повышается, если пользователю разрешено группировать числа в наборы по три или четыре. Если ваша модель данных не может обработать пробелы, вы можете удалить их перед сохранением данных.
- Избегайте всплывающих диалогов, таких как чума. Никогда не отображайте один, если вы абсолютно не должны. Если вы решили, что должны, остановите и переосмыслите свой дизайн, прежде чем продолжить. Есть моменты, когда они необходимы, но эти времена значительно реже, чем вы можете себе представить.
- обратите внимание на обход клавиатуры. Большинство наборов инструментов пытаются сделать это правильно, но всегда перепроверяют. Пользователь должен иметь возможность использовать клавишу табуляции для логического обхода виджетов.
Все эти правила, конечно, могут быть нарушены. Но только сломайте это, если Вы ломаете это по уважительной причине.
Помните, что программное обеспечение предназначено для помощи пользователю, оно должно делать то, что он хочет, а не заставлять его делать то, что он хочет.
Когда вы собираетесь выполнить действие, которое изменит или удалит информацию, не спрашивайте "Вы уверены?" - пользователи научатся нажимать кнопку как часть действия. Попробуйте учесть "Отменить" в дизайне системы.
Сделайте выбор по умолчанию, который будет рад большинству пользователей.
Всегда предоставляйте своему пользователю "выход" из любой точки мира, где не требуется использование кнопки "назад".
Лучший пример:
Если возникает ошибка, дайте им ссылку туда, где они были (или, по крайней мере, туда, где они могут начать все сначала).
Максимально используйте подсказки. Удивительно, как эти маленькие ребята могут добавить большую помощь конечному пользователю, и они незаметны для самого приложения.
При разработке пользовательского интерфейса сделайте это как можно проще, но не проще.
- спросите пользователя, а не просто выдумывайте
- упростить - удалить шаг, устранить клики и т. д.
- познакомиться с принципами юзабилити
Я думаю, что эта ссылка была бы хорошей отправной точкой из "Руководства пользователя по Windows Vista от Microsoft":
http://msdn.microsoft.com/en-us/library/aa511328.aspx
И это может быть очень близко к списку с двумя страницами, который вы ищете: "Основные нарушения":
http://msdn.microsoft.com/en-us/library/aa511331.aspx
Очень простые советы, например: "Установите минимальный размер окна, если есть размер, ниже которого контент больше не может использоваться".
Не увеличивайте "обнаруживаемость" за счет элементарной ясности и удобства использования.
Найдите то, что пользователь будет делать чаще всего, а затем сделайте это проще всего.
Например: у меня есть длительный опыт работы с микроволновой печью.
Многие требуют, чтобы вы установили часы, которые вы никогда не используете ни для чего, прежде чем использовать микроволновую печь, и она забывает каждый раз, когда теряет питание, и для этого требуется 10 нажатий клавиш на этих трудных в использовании кнопочных панелях.
Простой юзабилити-тест показал бы, что наиболее распространенным временем приготовления, используемым для микроволновых печей, является стандартная "минута" и ее кратные. Таким образом, идеальная микроволновая печь должна быть способна готовить продукт в течение 1 минуты на большой мощности за 3 или менее действия.
Для случаев, выходящих за пределы минуты, но в течение 5 минут после золотой "1" минуты, должно быть немного больше шагов, но не значительно, и только значительное количество действий, необходимых для времени приготовления> 5 минут. (которые довольно редки)
2 примера отличного микроволнового дизайна
1. 4 части. Дверь, температурный циферблат, таймер, временная подсветка
Температурный циферблат является аналоговым и не зависит от предыдущей настройки с изменяющимся диапазоном скольжения
Временной диск является цифровым, но имитируется аналоговый, поворот часовой стрелки увеличивает время по часовой стрелке (показано последовательностью освещения под циферблатом). Поворот циферблата против часовой стрелки уменьшает время часов. Приготовление пищи уменьшает время на часах.
Дверь закрывается и время на часах начинает готовиться. Дверные проемы паузы приготовления.
стандартная операция: открыть дверь, загрузить, повернуть шкалу времени, закрыть дверь (или, при необходимости, сначала закрыть дверь, и приготовление начнется, как только> 1 с на часах)
2. 6 частей, дверь, циферблат, кнопка питания, кнопка запуска, кнопка сброса, цифровой дисплей времени
Кнопка "Пуск" без выбранного времени начинает готовить в течение 1 минуты на большой мощности.
Кнопка запуска во время приготовления добавляет 1 минуту ко времени.
Временной набор сохраняется между сессиями. Поворот циферблата вызывает копирование времени, сохраненного в позиции циферблата, в цифровой таймер.
Нажатие "power" до начала приготовления будет
- если циферблат не был повернут, скопируйте текущее время, сохраненное в положении "dails", в цифровой таймер.
- в случае, если циферблат повернут, выбор уровня мощности уменьшается на 1 или, если используется самый низкий уровень мощности, вернитесь к максимальному.
Сила нажатия во время приготовления снижает уровень мощности на лету.
стандартная операция: 1 минута высотой = нажмите старт.
1 минута средней высоты = нажмите старт, нажмите кнопку питания.
2 минуты высоко = дважды нажмите старт.
<в любое время> на высоком уровне = поверните циферблат, пока не будете довольны, нажмите старт
<ранее выбранное время> на высоком = нажмите мощность, нажмите старт
<ранее выбранное время + 1 минута> на высокой = нажмите кнопку питания, нажмите кнопку запуска дважды.
Как вы можете видеть здесь, добавление небольшого количества дополнительных кнопок, может добавить большую степень выразительности и функциональности дизайна.
Любой дизайн с цифровой клавиатурой для определения времени, как правило, не соответствует моим критериям хорошего дизайна.
Было отмечено, что эти проекты могут, для некоторых людей, иметь более высокую кривую обучения, но после обучения мышечная память делает ее инстинктивной. В противоположность более (очевидным?), Но чрезмерно сложным конструкциям, которые даже опытному пользователю неоднократно придется тратить утомительное количество времени на выполнение утомительных произвольных операций, просто для достижения общих целей.
Проведите некоторое тестирование юзабилити в коридоре (так же, как вы делали бы проверку кода).
Даже очень быстрый тест на юзабилити "Эй! Попробуйте это" (если вы можете так его назвать) с парнем рядом с вами будет иметь большое значение. Главное, чтобы кто-то, кроме вас, попробовал интерфейс, который вы только что создали.
Удивительно, сколько раз другие люди застревают, используя ваш новый пользовательский интерфейс, и это занимает всего пару минут (обычно), чтобы найти самые большие проблемы.
- Минимизировать количество кликов
- Единый вид (размер текста, кнопки.. и другие элементы управления)
- Минимизируйте бесплатные изменения... (например: в адресной записи... укажите состояния в выпадающем списке... и т. Д. И т. Д.)
- В раскрывающемся списке стран... сначала укажите страну проживания... (кто из вас разочарован тем, что США указаны внизу, и вам нужно прокрутить вниз?)
- Общие выпадающие списки можно заказать по выбору пользователя.
- Нет орфографии msitake;) вообще
- Обратите внимание на маркировку текста: для адреса электронной почты (укажите заголовок как адрес электронной почты... поверьте мне... я видел его как адрес электронной почты:)
- Символ валюты для сумм. единообразное отображение цифр в количестве.. напр.: $12,15 ==> $12,15 $10,9 ==> $10,90
- Метка собеседника для обозначения поля ошибки до того, как пользователь нажмет кнопку OK/ Сохранить (например: для адреса электронной почты, если нет символа "@", нет необходимости ждать, пока пользователь нажмет кнопку "ОК", а затем сообщить ему недействительный адрес электронной почты)
- Избегайте повторных вводов... (например: опция "Запомнить меня" на экране входа)
- глобальная опция приложения, чтобы позволить пользователю продолжить с того места, где он остановился в предыдущем примере)
- при отображении данных в сетке... параметры фильтра в стиле Excel
- значения по умолчанию для входов.
Люди... не стесняйтесь спускаться вниз по любой причине выше по уважительным причинам!!!
Если вы используете всплывающее окно из редактора, обязательно верните точку вставки или состояние, каким оно было до появления всплывающего окна. Слишком много программ просто оставляют вас "зависшими" и вынужденными возвращаться обратно.
Мое основное правило дизайна пользовательского интерфейса - каждая страница должна выполнять одну задачу и только одну задачу. Это делает страницы простыми, что делает дизайн чистым и делает приложение более понятным.
Этот тип дизайна называется индуктивным пользовательским интерфейсом. Вот документ, который Microsoft выпустил в 2001 году по этой теме. Текст может быть немного устаревшим, но принципы, как правило, довольно хороши. Единственное предостережение в том, что в дизайне, подобном этому, необходимо найти баланс. Если вы упрощаете слишком много, пользователям придется перемещаться повсюду, чтобы выполнить простые задачи, и выигрыш в понимании будет потерян из-за недостаточной производительности.
Тест бабушки.
Это мой термин для концептуального вопроса: "Может ли ваша бабушка, которая никогда не использовала компьютер, кроме электронной почты и проверяя www.cutecats.com, использовать его?(При условии, что у нее есть реальные знания для использования этого конкретного приложения)".
Все общее должно быть очевидным; ничто не должно быть магией черного ящика с побочными эффектами. Необычные вещи должны быть доступны в общем формате, который пользователь использовал раньше.
Четкая маркировка, четкий маршрут к файлу справки, четкие действия с четкими эффектами.
Если бабушка не может использовать вашу программу рисования, вам нужно серьезно подумать о вашем интерфейсе.
Несколько простых советов для повседневного пользовательского интерфейса веб-дизайна и дизайна приложений:
- Используйте простые статические наброски, чтобы начать предварительные планы разработки веб-приложений. -Не позволяйте пользователям слишком много вариантов. Вместо этого, используйте дизайн Cater для того, чтобы отправлять пользователей по пути, который им принесет пользу. -Определить ключевые группы пользователей и поездки, которые они совершили -Практический итеративный дизайн как часть пользовательского интерфейса для обеспечения возврата инвестиций
Вместо произвольных кнопок "ОК" и "Отмена", которые в данном контексте могут быть неоднозначными, и пользователи слепо нажимают одну из них, кнопки должны содержать краткое описание того, что они делают.
[Ok, Please Cancel my subscription ], [ Please do not cancel my subscription ]
намного лучше чем
Cancel my subscription?
[ OK ] [ Cancel ]
(такие сбои часто появляются на dailywtf)
Мне нравится следовать этим указаниям:
- Стандарт - следуйте известным стандартам / шаблонам, используйте идеи всех продуктов, которые вы уважаете
- Просто - держите ваши решения простыми и легко изменяемыми (при необходимости)
- Элегантный - используйте меньше, чтобы достичь большего