UI и UX

На картинке два варианта отображения кнопок действия. Какие из этих вариантов правильные?

• 
• 

Answer explanation

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

На картинке два варианта ленты новостей. Какие из этих вариантов правильные?

• 
• 

Answer explanation

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

На картинке два варианта формы для доставки. Какой вариант наиболее удобный и правильный?

• 
• 

Answer explanation

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

На картинке два варианта отображения выпадающего списка в темной теме. Каким цветом нужно сделать состояние контрола при наведении курсора?

• 
• 

Answer explanation

В темной теме, чем светлее элемент — тем он ближе к пользователю. Поэтому необходимо показывать состояние наведения более светлым цветом.

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

• 
• 
• 
• 

Answer explanation

В варианте 3 — все данные находятся перед глазами и пользователю не нужно вписывать вес самостоятельно.

На картинке два варианта текста с разными шрифтами — с засечками и без. Какой шрифт наиболее пригоден для долгого чтения?

• 
• 

Answer explanation

Шрифты с засечками считаются более пригодными для длительного чтения. Они помогают глазу плавно скользить по строкам текста, создавая визуальные ориентиры и облегчая фиксацию на каждой букве. Например, к таким шрифтам относится Times New Roman.

На картинке два варианта отображения пары кнопок. Какие из этих вариантов правильные?

• 
• 

Answer explanation

Кнопки «Отмена» и «ОК» в интерфейсе могут располагаться следующим образом: «Отмена» — слева, а «ОК» — справа.

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

На картинке два варианта отображения модального окна с уведомлением. Какие из этих вариантов правильные?

• 
• 

Answer explanation

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

На картинке два варианта отображения пары радиокнопок. Какие из этих вариантов правильные?

• 
• 

Answer explanation

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

На картинке два варианта формы с выбранным правильным ответом. Какие из этих вариантов правильные?

• 
• 

Answer explanation

Радиокнопка подразумевает только один правильный ответ.