Задача: посетителям фитнес-клуба требуется инструмент подбора групповых занятий в свободное для посещений время

Дмитрий Зимин
11 сентября 2008

Уважаемые советчики!

Задача: посетителям фитнес-клуба требуется инструмент подбора групповых занятий в свободное для посещений время.

Решает ли такой интерфейс задачу? Достаточно ли прозрачна логика работы?

Спасибо.

А. Г.

Как насчет вот такого интерфейса?

ПН, СР, ПТ:	0800 0830 0900 0930 1000 1100 1200 1400 1500 1600 1800 1830 1900 1930 2000
ВТ, ЧТ:	0800 0830 0900 0930 1000 1100 1200 1400 1600 1800 1830 1900 1930 2000
СБ, ВС:	0830 0900 0930 1000 1100 1200 1400 1600 1800 1830 1900 1930 2000

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

Твитнуть

Отправить

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

Шейпак Сергей
11 сентября 2008

Непонятен алгоритм выбора занятий:
- Я отмечаю «свободные часы», а в ответ получаю список всех групповых занятий, на которые я могу попасть (пересечение по времени)?

или
- Идёт набор на групповые занятия.
Желающие отмечают время, на которое они хотят попасть. Как только в одном временном промежутке набирается 10 человек (цифра с потолка), желающим сообщается, что группа набрана на время с 10:00 до 12:00 по понедельникам и субботам, надо прийти и заплатить денежку.

Расписание, конечно, должно быть. Но я их не люблю.

Меня жутко напрягает лазить по расписаниям. Вспоминаю свой универ, где на стене весел плакат А0 с расписанием занятий всего факультета, напечатанного 8-м шрифтом. Зачем мне смотреть расписание других курсов и групп? Мне они не интересны.

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

Я отмечаю в списке групповых занятий футбол и единоборства, указываю свободные часы, в результате получаю те группы, с которыми моё время пересекается (с погрешностью до 20 минут).

Мне интерфейс Дмитрия нравится. Хочу добавить от себя: сделаете multiselection, чтобы я мог выбрать все часы с 18:00 до 20:00 с понедельника по пятницу и отметить их, как свободные. Мне не придется делать 2×5 кликов, достаточно одного широкого движения мышки и клика на выделенной области.

Чаще всего люди работают фиксированное время 5 дней в неделю, и свободен только вечер. Или утро, если в ночную смену работаешь.

Колосков Вячеслав
11 сентября 2008

Вопрос: а что мы тут делаем? Что означают зелёные полоски и что красные? Где легенда?

Если это инструмент подбора групповых занятий в свободное для посещений время, то где эти самые групповые занятия? Тут только временная шкала.

Михаил Майстров
11 сентября 2008

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

К тому же ваш пример подразумевает, что свободное время от недели к неделе будет то же. А если это не так?

Плюс напоследок — маленький нюанс к интерфейсу: «дети до 7 лет» подразумевает, что ребенок 8-10 лет уже «взрослый»?

Сергей Долгов
12 сентября 2008

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

Человек может не только для себя подбирать занятия — почему он не должен видеть весь список?

И ещё — подразумевается, что эта схема для одного зала или для нескольких? На практике одновременно загружены бывают как минимум две площадки.

Как и в истории с расписанием институтских занятий http://artgorbunov.ru/bb/soviet/20080121/, здесь не хватает многих данных о работе клуба, чтобы сделать действительно функциональное расписание.

Прилагаю свой вариант, сделанный, за отсутствием на ноуте другого софта, в Экселе :-)

Дмитрий Зимин
15 сентября 2008

Артем, мне на вашем варианте не совсем понятно, где можно увидеть время окончания занятия. Занятым людям это должно быть важно.

Алексей Мельников, обычное расписание тоже есть на сайте. То, что я изобразил — это просто альтернативный инструмент.

Шейпак Сергей, это 1-ый вариант. Действительно, человек выбирает свободное время и узнает, что он может посетить. Второй вариант тоже существует, но это происходит непосредственно в клубе при живом общении с тренерами. Конечно, я бы тоже пилатесу предпочел единоборства, но фактор времени более весом. Делать 2×5 кликов необязательно. Нужно будет сделать 5 жестов «замазывания» (протягивания) курсором по ячейкам. Дискретный «клик» — это не единственный способ ввода.

Колосков Вячеслав, когда человек открывает страницу, он видит только серые полоски. Те ячейки, по которым он кликнет, будут окрашены в зеленый цвет. Зеленая ячейка под курсором превращается в красную, показывая тем самым, что при клике она будет удалена. Этому способствует и значок у курсора. Мне показалось, что в легенде нет необходимости.

Михаил Майстров, все верно, у человека свободное время будет корректироваться от недели к неделе. Поэтому на сайте предусмотрено запоминание пользователя и его персонального расписания (по cookies). В любой момент можно «перемазать» все заново. Что эже касается детей «до 7 лет», то это, конечно, очень условно. Родители сами определяют, в какую группу отдать свое дитя.

Сергей Долгов, эта схема для одного зала (клуб элитный, не массовый). В вашем варианте тоже не очень понятно, во сколько занятие закончится. Хотя комбинация с расписанием в целом мне нравится.

Господа, возникла следующая мысль: может, имеет смысл сделать это похожим на диаграмму Ганта с возможностью отметки подходящих занятий (через AJAX)?

Леонид Спирин
5 января 2020

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

Я исправил некоторые моменты, теперь:
1. У кнопки сверху нет хвостика. Он не нужен.
2. Увеличились заголовок и кнопка отправки.
3. Дни недели без точек и набраны прописными.
4. Нет времени в скобках у заголовка — ограничения понятны из интерфейса.
5. Время можно отметить только зелёным. Было три уровня: зелёный — могу, красный — не могу, серый — не знаю. Это усложняет выбор и работу с данными. Стало два: зелёный — могу, серый — не могу.
6. Не чекбоксы, а диаграмма Ганта. Если я правильно понял по положению курсора, нажатие на шкалу работает как чекбокс: первый клик — зелёный, второй — красный, третий — снова серый. Удобнее перетянуть один раз, чем много раз кликать.

	Ваш комментарий	Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа. Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным. Вот такой веб 2.0.

Имя и фамилия	обязательны полностью для публикации комментария
Электронная почта	адрес не будет опубликован
Ваши соображения
Иллюстрация	гиф или джипег шириной не более 700 пикселей

Похожие советы Представление информации₁₅₇ Сначала данные, потом фильтры₁₃ Интерфейс₅₉₄ Формат: таблица₁₂₆ Носитель: сайт₅₃₄

11 • 2 • 6 • 5 •

3 • 2 • Зачем читать книги из совета о «науке» юзабилити, когда приглашать дизайнера в проект и как определить хороший референс для тренировки насмотренности Талант в успехе дизайнера, что почитать о дизайне продуктов, трудоустройство выпускников школ бюро Вакансия визуализатора 2 • 2 • 3 • 1 • 2 • 4 • С подходами к адаптивной вёрстке вроде все уже разобрались, но вот с отображением табличных данных понятно не всё 8 • Почему на шкале большинства термометров цифры написаны по обе стороны делений? 1 • 6 • 4 • 2 • Хочу сделать красивый блог с пошаговыми рецептами 7 • 1 • 7 • 4 • 2 • 6 • 5 • 14 • 3 • 5 • 8 • 3 • Числа, кратные 5 или 10 кажутся больше, чем остальные 4 • 6 • 6 • 5 • 1 • 1 • 2 • 2 • 6 • 2 • 13 • 6 • 19 • 4 • 7 • 4 • 3 • 46 • 10 • 4 • 16 • 7 • 2 • 6 • 5 • 3 • 15 • 2 • 6 • 2 • 11 • 10 • Есть 10 объектов, в каждом объекте 3 зоны, в каждой зоне 2-5 температурных датчиков 4 • 14 • 5 • 6 • 8 • 8 • 4 • 3 • 8 • 2 • 5 • 5 • 7 • 4 • 8 • 6 • 2 • 2 • 7 • 7 • 5 • 5 • 1 • Поскольку одни люди привыкли мерить время цифрами, а другие циферблатами, мне кажется разумной идея добавить в интерфейсы телефонов пиктограммы с часами 2 • 5 • 15 • 9 • 5 • Что вы думаете о нотации Гарретта? 10 • 8 • 10 • 12 • 3 • 3 • 4 • 29 • 7 • 10 • Существует ли какая-то система нотации для моделирования пользовательского интерфейса, которая бы позволяла обозначать такие свойства элементов, как «резиновость», сохранение выравнивания по какой-либо оси? 10 • 7 • 7 • 11 • 8 • 11 • 16 • 2 • 2 • 4 • 4 • 6 • 1 • Что вы думаете насчет Google Chart API? 6 • 4 • 12 • 6 • 3 • 3 • 14 • 15 • 6 • 8 • 15 • 11 • 9 • 4 • 11 • 4 • 4 • 7 • Что еще может служить для упрощения навигации в метро? 16 • 2 • 15 • 4 • 5 • 11 • 1 • 7 • 9 • 17 • 4 • 5 • 3 • 6 • 11 • 2 • 13 •

3 • Как правильно отображать начальное состояние фильтров по производителю с использованием чекбокса? 4 • 2 • 4 • 4 • 7 • 7 • 3 • 8 • 11 • 3 •

2 • 1 • 1 • 2 • Неактивная кнопка в форме регистрации 2 • Защититься от случайного нажатия «Сдаться» 1 • Расскажите о меню Расскажите о мастере 1 • Расскажите о состояниях элементов интерфейса 1 • Расскажите о клике 1 • Расскажите о кнопке 3 • Группы иконок в перегруженных интерфейсах 5 • 5 • 2 • Кнопка «Подробнее» Скопировать в новую заявку 4 • 2 • Иконки соцсетей передизайнены Подключить новый способ приёма платежей Пагинация таблицы ордеров с тысячами строк Просят сделать дизайн-систему Красивые шаблоны коммерческих предложений, что делать, если коллега работает плохо и откуда пошла мода на скруглённые углы Зачем читать книги из совета о «науке» юзабилити, когда приглашать дизайнера в проект и как определить хороший референс для тренировки насмотренности Где продать готовый дизайн, можно ли дизайнеру стать аналитиком и когда писать клиентам письма-догоняйки Как поступаете с иконками, когда линии размываются? Плагины для Фигмы. Часть 3 Как работать в Фигме быстрее. Часть 4 1 • Как анимировать в Фигме? 1 • 1 • Как сделать мобильную версию главного меню сайта с большим количеством разделов? 1 • 3 • Как донести до коллег, что дизайнер — не просто оператор Фотошопа? 6 • Насколько правильным будет делать цвет ошибок почти таким же, как цвет кнопок? 4 • Как показать кликабельность картинки в электронном письме? 5 • 8 • Как предложить руководству создать единую библиотеку элементов 5 • 1 • Где хранить скриншоты интерфейсных решений, чтобы было удобно искать референс? 10 • Каким должно быть ресторанное меню на сайте? 1 • Насколько оправдан звук в веб интерфейсах? Например: клик по ссылке, добавление товара в корзину, удаление из корзины и т. д. 2 • 8 • Что лучше использовать: спинер или прогрессбар? 5 • 7 • 3 • 2 • 3 • Чем заменить «Подробнее» в описании продуктов? 2 • 1 • 5 • Функция Auto Layout в Фигме — как делать резиновые кнопки Как передавать макеты в разработку? 3 • Как работать в Фигме быстрее. Часть 3 1 • Как работать в Фигме быстрее. Часть 2 Как работать в Фигме быстрее 7 • Плагины для Фигмы. Часть 2 Плагины для Фигмы. Часть 1 1 • Сервис для перевода денег между картами. Часть 2 3 • 5 • Советы о дизайне интерфейсов 4 • 3 • 1 • Какую иконку придумать для кнопки вызова официанта 1 • Смена иллюстраций при переключении абзацев в книгах издательства бюро 6 • 1 • Как озаглавить форму записи в парикмахерскую 2 • 5 • 4 • 2 • 4 • 1 • Принцип последней мили в интерфейсах Раскин вскользь говорит: «большинство людей из той культуры, на которую этот интерфейс ориентирован» 2 • 3 • 1 • 1 • 1 • 1 • Исследование Гугля: пользователям легче читать, когда подписи над полями 2 • Должно ли быть на каждом экране название мобильного приложения? 1 • Что такое интерфейс? 2 • А что за «взгляд новичка» такой? 1 • 12 • 16 • Как вы доносите своим клиентам, что дизайн — это не внешний вид, а совершенно иная деятельность? 3 • 4 • 1 • 2 • 5 • 4 • 2 • Как нарисовать правильную галочку? 1 • Идеальная панель администратора, какая она? 13 • Занимаюсь разработкой интерфейса веб-приложения, в некоторых местах надо показать числовой коэффициент 3 • Как правильно показать на главной странице направления компании, когда их аж 12 штук? 10 • 4 • Карусели и слайдеры 10 • Но когда другой человек это видит, говорит, что это плагиат, ты всё скопировал, воруешь и т. п. 3 • Как правильно писать размерность? 6 • Как быть с длинными названиями компаний при создании логотипов? 9 • Что делать, если он совершил какие-то действия, а после этого заходит в свой профиль, где уже есть сохранённые данные? 5 • Не могу покреативить над комм. предложением. Тема — грузоперевозки, грузчики 2 • 9 • Как лучше называть чекбокс про запоминание пользователя? 5 • 6 • 7 • 1 • 8 • Должен ли макет сайта понравиться абсолютно всем сотрудникам веб-студии, прежде чем менеджер проекта покажет его клиенту? 3 • 8 • 2 • Адвокат хочет выйти на Москву 4 • 14 • Хотим переделать свой и-магазин пиротехники 3 • Год назад запустил личный проект «Либретто опер» 2 • Необходимо разработать интернет-магазин китайского чая 2 • 5 • Хочу сделать красивый блог с пошаговыми рецептами 7 • 2 • Скажите, в каком виде вы оформляете юзкейсы? 1 • Веб-студия рисует дизайн сайта и для выпадающего меню упорно делает пунктирную ссылку 4 • В совете Артём Горбунов говорил о несочетающихся пропорциях шрифтов 1 • Как вы относитесь к «отложенным товарам» в интернет-магазинах? 3 • 3 • 4 • 3 • 1 • Как бы вы расставили ссылки в этих новостях с сайта glavbukh.ru? 1 • 7 • Клиент настаивает на длинных-длинных страницах текста в десятки экранов 4 • 2 • Что даёт вам основания предполагать, будто принципы, сформулированные для материальных систем, можно переносить на информационные? 3 • 6 • 3 • 3 • 5 • Какой делать фавыконку сайта: просто 16×16 или содержащую в себе разные размеры? 10 • 3 • 4 • 1 • 2 • 7 • 2 • 6 • 5 • 2 • 1 • 2 • 9 • 4 • 5 • Есть каталог товаров, и нужно придумать названия для места, куда этот товар можно отложить 3 • Сейчас многие предприятия покупают домены на русском 3 • 5 • 7 • Есть подозрение, что «выберите пункт», вбитый в селект по умолчанию — это костыльное решение 8 • 1 • 4 • Подскажите пожалуйста, как бы вы построили диаграмму следующего типа 2 • 4 • Многие антивирусы не дают возможности закрыть или удалить себя без дополнительных усилий 9 • 4 • 5 • 6 • 5 • 7 • Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 • 19 • 19 • 2 • 6 • Раз уж интерфейс — зло, нужна ли вообще интернет-магазину корзина? 7 • 18 • 9 • Почему для придания клавишам дополнительных функций никто не использует колёсико с кнопкой под ним? 6 • 4 • 6 • Что можно было бы сделать с изображениями, чтобы это их не уродовало и затрудняло их копирование? 1 • 3 • В. И. Ленин или В.И. Ленин? 4 • Премия имени Олега Янковского вручается 32 мая 1 • 6 • 3 • Почему копирайт разработчиков сайта принято ставить только на главной странице? 6 • 3 • 5 • 3 • Какую пиктограмму нужно ставить рядом с идущим таймером? 3 • 6 • Дорогие советчики, объясните, что значат знаки после стоимости 999,— 10 • 4 • 10 • 4 • 1 • 3 • 14 • 2 • 5 • 4 • 3 • 5 • 9 • 5 • Если пользователь при авторизации на сайте трижды неправильно ввёл пароль, то на его электронную почту автоматически высылается письмо с ссылкой на восстановление 5 • Чем арт-директор отличается от дизайнера? 5 • Как бы вы набрали названия, например, магистральных трубопроводов? 1 • Печатаю я текст и вдруг обнаруживаю, что делаю это в неправильной раскладке 10 • 10 • Имеет ли смысл ставить кнопку «купить» в списке продуктов в интернет-магазинах? 22 • 2 • Как правильно писать ОКПО, ОГРН, ИНН/КПП в реквизитах организации? 5 • Зачем формы авторизации часто делают во всплывающих лайтбоксах 2 • 8 • Когда пользователь нажимает «Скачать файл», у него не открывается новое окно или же вкладка. Значит, ссылку на скачивание тоже надо подчёркивать пунктиром? 3 • 3 • Числа, кратные 5 или 10 кажутся больше, чем остальные 4 • 5 • 2 • Как вы думаете, какой лучше текст, мотивирующий закрывать дверь, лучше разместить на листе А4? 6 • 2 • 7 • При запросе восстановления пароля сайты высылают подтверждение, при нажатии на ссылку генерируется новый пароль и высылается второе письмо 7 • Стоит ли обозначать ссылки, которые что либо меняют простым наведением курсора, волнистой линией? 5 • 17 • 6 • Что вы думаете по поводу наличия пункта «главная страница» в основном меню сайта? 9 • 1 • В инфографике есть Тафти, а есть ли кто-то такой же в мире логотипов? 7 • 6 • Почему у вас на сайтах везде используется английский перевод в урл, а в блоге — транслит? 6 • Может, кто-нибудь из советчиков знает удачный перевод user experience? 10 • 4 • 1 • 8 • 1 • 4 • 1 • 2 • Как писать название исполнителя и название песни 6 • 2 • 10 • Когда требуется написать что-то вроде «руб./м²» возникает вопрос — а нужна ли в данном случае точка? 5 • 7 • 1 • Я думаю, что повсеместно нужно использовать формат даты 1 дек 2010 19 • 6 • 6 • 9 • 8 • 2 • Почему бы не отвести часть правой стороны экрана под корзину? 13 • Как вы относитесь к новому формату форумов — вопросных систем? 3 • Артём, стоит ли учитывать различие регистров букв в адресах страниц? 11 • 2 • Как правильно писать счёт игры: Германия — Англия 4:1, 4—1 или 4–1? 5 • 2 • Я перевожу книгу Эдварда Тафти «Envisioning Information» 12 • 2 • 7 • 2 • 13 • 12 • 19 • 5 • 2 • 19 • Вы согласны с тем, что интуитивный интерфейс есть только у соски, все остальные нужно изучать? 12 • 4 • 2 • 7 • 3 • 7 • Итоги конкурса уважаемых советчиков «Сургут» 13 • Как открыть продуктовый магазин в частном доме? У меня есть сайт о Джумле 4 • 13 • 1 • Итоги конкурса уважаемых советчиков «Таблица оценок КВН» 23 • 46 • Хотелось бы узнать ваше мнение о правиле «главная страница сайта должна умещаться на одном-двух экранах монитора» 3 • 5 • 10 • 10 • 9 • 4 • 1 • 2 • 2 • 1 • 7 • 4 • 7 • 3 • 5 • 9 • 2 • Что скажете о работе «Информационных архитекторов»? 1 • 10 • 6 • 5 • 4 • 3 • 11 • Хотелось бы услышать советы по минималистическому дизайну и по дизайну интернет-магазинов 5 • 15 • Почему на artgorbunov.ru курсор над горизонтальным скроллбаром имеет вид «движение во все стороны»? 8 • 12 • 3 • 5 • 9 • 6 • 2 • 13 • 6 • 5 • 2 • 14 • 4 • 13 • Как вы относитесь к иконке RSS? 8 • 10 • 5 • 7 • 1 • 11 • 4 • 3 • 14 • Есть 10 объектов, в каждом объекте 3 зоны, в каждой зоне 2-5 температурных датчиков 4 • 2 • 35 • 4 • 3 • 16 • 5 • 8 • 7 • 1 • 9 • 8 • 8 • 6 • 4 • 11 • 4 • 3 • 11 • 6 • 8 • 2 • 1 • 5 • 5 • 7 • 20 • 4 • Шесть тезисов об идеальной электронной книге 12 • 4 • 2 • 1 • 26 • 22 • 6 • 24 • 10 • 3 • 2 • 2 • 23 • 9 • 7 • 18 • 12 • 15 • 7 • Хотел бы узнать ваше мнение по поводу размещения двух логотипов на визитке 3 • 3 • 4 • Довольно часто веб-страница должна содержать заведомо большое количество информации 2 • 1 • 7 • 9 • 6 • 5 • Как вы считаете, стоит ли причислять смайлы к знакам пунктуации? 6 •

Комментарии

Ваш комментарий