Задумывались ли Вы когда-нибудь о том, сколько разного рода приложений используется среднестатистическим современным человеком ежедневно? Исследовательские данные, отвечающие на этот вопрос, находятся за пределами данной статьи, но здравый смысл подсказывает мне, что число это очень велико и с каждым днем увеличивается в геометрической прогрессии.
И здесь важно отметить —одним из важнейших элементов приложения или программы с точки зрения пользователя является, конечно же, пользовательский интерфейс.
В XXI веке нашей эры существуют десятки миллиардов вычислительных устройств. Еще больше существует программ для них, и у каждой программы имеется свой интерфейс, являющийся «рычагом» взаимодействия между машиной и пользователем. И не удивителен тот факт, что фактор качества интерфейса прямо пропорционален фактору эффективности взаимодействия между пользователя и машиной.
И всё же вовсе не все разработчики и дизайнеры задумываются о создании понятного и удобного графического пользовательского интерфейса. Особенно это касается игрового интерфейса. Разработчиков обычно интересует один и тот же вопрос: верно ли, что успех или провал игры определяется ее интерфейсом? И большинство из них соглашается, что плохой интерфейс портит всю игру. Они также пришли к единому мнению, что если игра плоха, ее уже ничто не спасет, даже выдающийся интерфейс. Тем не менее нельзя забывать, что создание пользовательского интерфейса — один из важнейших этапов разработки, которым, к сожалению, в современном мире часто пренебрегают.
Сведения об интерфейсе:
– Интерфейс должен быть интуитивно понятным настолько, чтобы у пользователя не возникала необходимость обращения к руководству.
– Для упрощения процесса «общения» между машиной и пользователем необходимы руководство или справка. Буквально — графическая подсказка, объясняющая значение и возможности того или иного элемента интерфейса. Полное руководство должно являться частью интерфейса и должно быть доступным для пользователя в любой момент взаимодействия.
– Чаще всего в интерфейсе пользователи сначала ищут предмет (существительное), а затем действие (глагол) к ней. Таким образом выполняется правило «существительное -> глагол».
– Например «файл -> открыть».
– Чем быстрее пользователь получит результат — тем лучше. Пример — «живой» поиск, когда варианты демонстрируются интерфейсом уже в процессе набора поискового запроса. Основной принцип: программа должна взаимодействовать с пользователем на основе наименьшей значимой единицы ввода.
– Следует с осторожностью предоставлять пользователю возможность по установке и сохранению личных настроек.
– Чем больше пользователь работает над какой-либо определённой задачей, тем больше он на ней концентрируется и тем меньше перестает замечать подсказки и сообщения, демонстрируемые программой. Чем более критической является задача, тем меньше вероятность того, что пользователь заметит предупреждения относительно тех или иных потенциально опасных действий.
Какие элементы интерфейса (ЭИ)предпочтительнее создать?
– Разработка интерфейса обычно начинается с определения задачи либо комплекта задач, для которых предназначен данный продукт.
– Простое должно оставаться простым. Интерфейс не нуждается в компликации и усложнении. При разработке необходимо постоянно задумываться о том, как сделать интерфейс максимально простым.
– Пользователи не задумываются над тем, как устроена программа. Все, что они видят — это интерфейс. С точки зрения потребителя именно интерфейс является конечным продуктом.
– Интерфейс должен быть максимально ориентированным на человека, то есть отвечать нуждам пользователя и учитывать его слабости. При разработке необходимо постоянно думать о том, с какими трудностями может столкнуться пользователь.
– Необходимо принять во внимание человеческий фактор: поведение и привычки пользователей. Не стоит менять хорошо известные всем элементы интерфейса на неожиданные, а новые ЭИ должны быть интуитивно понятными.
– Интерфейс должен быть разработан исходя из принципа наименьшего возможного количества действий со стороны пользователя.
Дизайн ЭИ включает в себя большое количество факторов: начиная от цвета, формы, пропорций, и заканчивая когнитивной психологией. Сам по себе дизайн интерфейса состоит из двух элементов: как игрок взаимодействует с игрой и как игрок получает информацию и реакцию на свои действия от игры. В играх любого типа есть UI, даже в нецифровых. Поля для настольных игр проектируются так, чтобы помещаться на среднестатистический стол, а карты — чтобы помещаться в руку среднего размера. Игровые компоненты должны содержать информацию, легкую для понимая, использования и интерпретации игроком. Однако, несколько принципов все же стоит отметить подробно:
– Цвет. Цвета делятся на теплые (красный, желтый, оранжевый), холодные (синий, зеленый), нейтральные (серый, белый, кремовый). Обычно для ЭИ используют теплые цвета. Данный фактор связан с психологией человеческого восприятия. Стоит отметить, что мнение о цвете — очень субъективно и может меняться даже от настроения пользователя.
– Форма. В большинстве случаев — прямоугольник, тем более мы имеем дело с интеллектуальными приложениями класса «пошаговая стратегия».Опять же, форма как и цвет достаточно субъективна.
– Основные ЭИ (часто используемые) должны быть выделены. Например размером или цветом.
– Иконки в программе должны быть очевидными и интуитивно понятными. Если нет — следует подписать. Ведь, по сути дела, вместо того чтобы объяснять, пиктограммы зачастую сами требуют для себя объяснений.
– Слишком маленьких элементов интерфейса необходимо избегать, так как по ним будет трудно попасть.
Как правильно расположить ЭИ на экране? Ответим на эти вопросы
– Есть утверждение, что визуальная привлекательность интерфейса основана на пропорциях. Существует так называемый принцип Золотого сечения (золотая пропорция, деление в крайнем и среднем отношении, гармоническое деление).Золотое сечение — это самая комфортная для глаза пропорция. Форма, в основе построения которой лежит сочетание симметрии и золотого сечения, способствует наилучшему зрительному восприятию и появлению ощущения красоты и гармонии. Суть данного принципа в том, что весь отрезок относится к большей его части так, как большая часть, относится к меньшей. Например, общая ширина окна интерфейса 900px, делим 900 на 1.62, получаем ~555px, это ширина блока с содержанием. Теперь от 900 отнимаем 555 и получаем 345px. Это ширина меньшей части.
– Перед расположением элементы интерфейса следует упорядочить (сгруппировать) по значимости, то есть определить, какие из элементов наиболее значимы, а какие — менее.
– Как правило элементы размещаются в следующей последовательности: слева направо, сверху вниз. Слева сверху — самые значимые элементы, справа внизу — наименее значимые. Это связано с порядком чтения текста. В случае с сенсорными экранами, самые важные элементы располагаются в области действия больших пальцев рук.
– Необходимо учитывать привычки пользователя. Например, если в Windows кнопка закрыть находится в правом верхнем углу, то в программе аналогичную кнопку необходимо расположить там же. Следовательно, интерфейс должен иметь как можно больше аналогий с известными пользователю вещами.
– Необходимо размещать элементы интерфейса ближе к расположению, где большую часть времени находится курсор пользователя, чтобы ему не пришлось перемещать курсор, например, от одного конца экрана к другому.
– Следует соблюдать пропорции.
– Элемент интерфейса можно считать видимым, если он доступен для органов восприятия человека в данный момент, либо он был настолько недавно воспринят, что еще не успел выйти из кратковременной памяти. Для нормальной работы интерфейса должны быть видимы только необходимые вещи — те, что идентифицируют части работающих систем, и те, что отображают способ, которым пользователь может взаимодействовать с устройством.
– Делайте отступы между ЭИ равными или кратными по отношению друг к другу.
Как ЭИ должны себя вести?
– Пользователи привыкают к сложившимся ситуациям. Например, при удалении файла, как правило, появляется окно с подтверждением: «Да» или «Нет». Со временем пользователь прекращает читать предупреждение и по привычке нажимает «Да». Поэтому диалоговое окно, которое было призвано обеспечить безопасность, абсолютно не выполняет своей роли. Следовательно, необходимо дать пользователю возможность отменять сделанные им действия.
– Если вы даете пользователю информацию, которую он должен куда-то ввести или как-то обработать, то информация должна оставаться на экране до того момента, пока человек ее не обработает, иначе он может просто-напросто её забыть.
– Избегайте двусмысленности. Например, на условном устройстве есть одна кнопка. По нажатии устройство включается, нажали еще раз — выключился. Если в устройстве перегорела лампочка, то при нажатии на кнопку не понятно, включаем мы его или же нет. Поэтому вместо одной кнопки выключателя приоритетным вариантом будет использование переключателя (например, checkbox с двумя позициями: «вкл». и «выкл».). За исключением случаев, когда состояние задачи, очевидно.
– Такой переключатель напрямую отражает состояние ЭИ.
– Весьма оптимальным вариантом является создание монотонных интерфейсов. Монотонный интерфейс — это интерфейс, в котором какое-то действие можно сделать лишь единственным способом. Такой подход обеспечит быструю привыкаемость к программе и автоматизацию действий.
– Не стоит делать адаптивные интерфейсы, которые изменяются со временем. Так как для выполнения какой-то задачи, лучше изучать только один интерфейс, а не несколько. Пример — стартовая страница браузера Chrome.
– Если задержки в процессе выполнения программы неизбежны или действие производимое пользователем очень значимо, важно, чтобы в интерфейсе была предусмотрена сообщающая о них обратная связь. Например, можно использовать индикатор хода выполнения задачи (status bar).
– Элементы интерфейса должны отвечать пользователю. Если пользователь произвел клик, то ЭИ должен как-то отозваться, чтобы человек понял, что клик произошел.
Графический интерфейс пользователя — это обширная тема, тесно переплетенная с психологией, занимающая умы ученых и сотни страниц книг и исследований. В столь малом формате, никак не выразить всю полноту затронутой темы. Однако, соблюдение базовых принципов позволит строить интерфейсы более дружелюбными к пользователю, а так же упростить сам процесс проектирования.
