Недавно я работал над сайтом Beautube, который объединяет видеоуроки с подробной информацией о продуктах, упоминаемых в видео, особенно в области косметики.
Этот проект поставил множество задач по созданию плотного, интуитивно понятного пользовательского интерфейса, который эффективно использует доступное пространство экрана, когда видео и веб-контент требуют больше места.
Здесь я хотел бы поделиться несколькими уроками, основанными на моем опыте.
Основными требованиями сайта являются отображение встроенного видео на YouTube, а также список элементов, содержащих сведения о продукте. Этот список может быть довольно длинным, так что прокрутка как-то была вовлечена. Вопрос в том, как.
В наших первоначальных прототипах я играл как с вертикальной прокруткой продуктов, смежных с видео, так и с горизонтальной прокруткой под видео. Для горизонтальной прокрутки были исследованы как стандартная прокрутка переполнения браузера, так и карусель, хотя карусели были признаны неэффективными.
На первый взгляд привлекательна горизонтальная прокрутка. Для настольных компьютеров горизонтальная ось позволяет разместить сразу несколько продуктов. Горизонтальная прокрутка также хорошо гармонирует с полосой воспроизведения самого видео.
В действии это другая история. Вертикальная прокрутка является стандартным поведением на веб-страницах и настолько знакома пользователям на данный момент, что они инстинктивно знают, когда прокручивать страницу вниз, даже если полосы прокрутки были удалены. Горизонтальной прокрутки не так уж и много. Кроме того, прокрутка вниз одним движением пальца является укоренившимся и удобным движением по сравнению с горизонтальным движением, особенно в течение длительных периодов времени. И большинство компьютерных мышек имеют колесо прокрутки только в одном направлении — как вы уже догадались, по вертикали.
В конце концов, одним из наших ранних дизайнерских решений было использование вертикальной прокрутки и приспособление остальной части пользовательского интерфейса, даже если это добавило некоторые компромиссы для решения.
(Пока оценок нет)
Загрузка...
