Школа
Интерфейс

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

Привет, бюро! Помогите решить проблему.

Это программа для тестирования студентов. Есть вопросы, в которых варианты ответа — изображения. При этом: их всегда четыре; они могут быть горизонтальными, вертикальными или квадратными в одном вопросе; соотношение сторон тоже бывает разным.

Картинки грузит преподаватель, когда создаёт тест. Те, что у него есть.

Отвечая на вопрос, студент: может выбрать один или несколько вариантов ответа; может увеличить изображение, чтобы рассмотреть детали, но при этом должен видеть вопрос. Как в случае со схемами: вопрос может содержать список пунктов, по которым схемы нужно сравнивать.

В приложении картинки свёрнуты, чтобы показать возможные варианты того, что будут грузить. При нажатии на изображение оно увеличивается. Выбрать вариант ответа можно ниже. Под картинками есть список: «Первая, вторая, третья, четвёртая».

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

Мария Барабаш
23 мар 2021
👁 5551  
Интерфейс

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

Привет, бюро! Помогите решить проблему.

Это программа для тестирования студентов. Есть вопросы, в которых варианты ответа — изображения. При этом: их всегда четыре; они могут быть горизонтальными, вертикальными или квадратными в одном вопросе; соотношение сторон тоже бывает разным.

Картинки грузит преподаватель, когда создаёт тест. Те, что у него есть.

Отвечая на вопрос, студент: может выбрать один или несколько вариантов ответа; может увеличить изображение, чтобы рассмотреть детали, но при этом должен видеть вопрос. Как в случае со схемами: вопрос может содержать список пунктов, по которым схемы нужно сравнивать.

В приложении картинки свёрнуты, чтобы показать возможные варианты того, что будут грузить. При нажатии на изображение оно увеличивается. Выбрать вариант ответа можно ниже. Под картинками есть список: «Первая, вторая, третья, четвёртая».

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

Мария Барабаш
23 мар 2021
👁 5551  
Константин Мозговой
Дизайнер бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Мария!

В Школе бюро та же проблема: в некоторых тестах нужно выбрать номер картинки из списка из‑за унаследованности от Гугль‑форм. В книгах бюро такой проблемы нет.

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

В Школе бюро та же проблема: в некоторых тестах нужно выбрать номер картинки из списка из‑за унаследованности от Гугль‑форм. В книгах бюро такой проблемы нет.

Правильным будет давать выбирать ответ кликом на картинку. А чтобы не надо было кликом увеличивать картинку, можно придумать несколько вариантов раскладок, которые бы учитывали разные пропорции и размеры картинок. Например, такие:

Большая картинка не обязательно должна быть сверху. Если бы она была не первым вариантом ответа, то встала бы иначе.

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

Чтобы вопрос был всегда перед глазами, он залипает при прокрутке:

P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.

Интерфейс
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы