x
 
Гена Этвандаш
20 марта 2008

Здравствуйте, Артем.

Это мои практически первые потуги в оформлении интерфейсов.

Задача: оформить просто, интуитивно, понятно и легко вот это.

Можно ли улучшить?



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

Вместо двух видов шариков лучше просто ставить серенький знак паузы у остановленных кампаний

Зачем палочка?

Симпатичные иконки, кстати

Цветовое выделение нелогично: выбрана строка, которую не предполагается ни обновить, ни добавить

Бесполезный набор ссылок

Наверняка лишний уровень

Чрезмерные расстояния между колонками

Поиск лучше поставить справа

Старая иконка  была и то лучше

Лучше сразу 50 и никого не спрашивать

Как сейчас помню, Первая мировая шла уже неделю.

Дату — по-русски


Поделиться
Отправить

Комментарии

Дима Дубина
20 марта 2008

Цифры в таблице надо бы выровнять по правому краю, чтобы разряды были на одной вертикали, так нагляднее и легче сравнивать значения. Тогда и знак доллара — поставить либо справа от числа, либо вынести в заголовок, к Расходам.

Разделитель в десятичной дроби — запятая, а не точка.

Юрий Солоницын
20 марта 2008

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

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

И еще, информационной части страницы в исходном варианте не хватает единства с навигацией. Интересно, почему многие так не людят «вкладки» рисовать как вкладки? Они в такой ситуации хороши, как мне кажется.

Неверов Евгений
20 марта 2008

Переключатель по страницам я бы оформил так:

← Предыдущая | [поле для ввода нужной страницы] / всего страниц | Следующая →

Павел Власов
20 марта 2008

В нынешнем интерфейсе поиск, наряду с сортировкой, — главные инструменты пользователя. Так что я бы наоборот расширил его влево, как у Яндекса.

Нужны ли здесь хлебные крошки? Пока что они только запутывают (еще одна система навигации.) Если в системе всего два уровня (включая корень), то вряд ли. Даже если и три.

«Помощь» просит у меня объединения с «обратной связью».

«Дата» чего? У любой кампании две даты: окончания и начала.

2008-й уже наступил :)

Константин Вялухин
20 марта 2008

Артем, добрый день.

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

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

Например:
сортировка по дате — разбивка по месяцу
сортировка по имени — разбивка по алфавиту
сортировка по показам или кликам — разбивка по диапазонам значений


20 марта 2008

Константин, именно так мы всегда и рекомендуем делать.


20 марта 2008

Ссылка «Помощь» находится в каком-то странном месте. Её бы к «Обратной связи» куда-нибудь :-)

Немного непривычно, что шестерёнка — это «изменить». Обычно она означает «настроить».

Если переключателя страниц совсем никак не удаётся избежать, то уж многоточие между 3 и 7 точно можно заменить на 4 5 6.

Кстати, в данном случае переключатель страниц, помимо прочего, плох ещё и потому, что совершенно неясно, как он соотносится с возможностью изменить способ сортировки. ¿Если я нажму на «Расходы», у меня отсортируется по расходам лишь те строки, которые попали на страницу 3 исходя из сортировки по дате, или у меня пересортируются всё, и я окажусь на странице, которая станет третьей уже исходя из сортировки по расходам? Или оно перекинет меня на первую страницу в новой сортировке? А если я поменяю лишь направление, но не колонку сортировки?

Вообще, переключатели сортировки хорошо бы подчёркнуть пунктирно, и пересортировывать всё без перезагрузки страницы.

А ещё было бы здорово выравнивать числа по разрядам.

Виталий Ким
20 марта 2008

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

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

Луковкин Сергей
20 марта 2008

Насколько вообще целесообразна здесь кнопка «обновить»? За что она отвечает? В этой системе два пользователя могут добавлять кампании одновременно? Если кнопка «Обновить» здесь все же нужна, то я считаю, иконка должна быть другой — две стрелки закрученные «по часовой». Это более привычно для пользователя, и воспринимается уже интуитивно. Та иконка, которая использована автором, ассоциируется с «Отправить и получить», и ее стоит использовать при наличии двух отдельных кнопок — «Только отправить» и «Только получить».

Луковкин Сергей
20 марта 2008

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

«Список» не должен быть ссылкой, ведь это ссылка на уже открытую страницу.

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

Значок обратной связи неудачный, как и расположение ссылки. Обычно «Обратная связь» удостаивается места внизу рядом с названием компании (кстати, между 2005 и 2007 должно стоять тире, а не дефис), но если нужно чтобы все вместо того, чтоб читать ЧАВО, сразу писали в службу тех. поддержки, поместите «Обратную связь» рядом с «Помощью». Более привычная иконка обратной связи — конверт.

Иконка пользователя некрасива — у человека определенно нет шеи и плечей, он больше похож на куриное яйцо на подставке. Иконка выхода действительно лучше старая. Информацию «логин-выход» привычно видеть в самом верху страницы справа. Логин уже является ссылкой, поэтому ссылки «Анкета» вообще не должно существовать, тем более в том месте, где она сейчас.

Во всех малых иконках слишком большое расстояние между самой иконкой и ссылкой — они смотрятся почти самостоятельными элементами.

Кай Лебен
20 марта 2008

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

Например, у нас в офисе есть сотрудники, которым нужна запись «01.12.2008», а не «1-го декабря». Во втором случае у них снижается эффективность работы.

Игорь Старков
20 марта 2008

У Ежи Петруччо лучше фото показывать на мой взгляд, чем иконку юзера!

Денис Братчук
20 марта 2008

Гена, мелкие замечания, конечно, есть, но они только подтверждают, что в целом интерфейс отличный.

1) «Ваши кампании» можно переименовать в «Кампании». Во-первых, чужие кампании и выбрать-то нельзя никак. Во-вторых, и в меню, и в хлебных крошках написано все таки «Кампании».

2) На макете не может быть 0 кликов, их должно быть «—».

3) На макете в последней дате неправильный год.

4) На макете изображено 12 кампаний, хотя в выпадающем списке их всего 10.

Когда вы начнете верстать эту страницу, вы можете обнаружить, что она выглядит не так привлекательно, как макет. Высота иконок слева, например, превысит высоту 10 кампаний, и иконки сползут к копирайту.

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

Антон Винодел
20 марта 2008

Фильтры с возможностью смотреть отдельно идущие и только остановленные кампании — это вещь.

Антон Винодел
20 марта 2008

Было бы неплохо выражать цветами от красного до зеленого (блекло) эффективность кампаний, подкрашивая фон под числом показов, кликами, CTR и расходами. Контрольное соотношение для выкрашивания — отношение числа кликов к расходу.


21 марта 2008

Антон, «запущенность» кампании — это ее нормальное состояние, поэтому помечать иконкой лучше приостановленные.

Юрий Солоницын
21 марта 2008

«Контекстная» панель инструментов — хорошая идея, но…

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

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

И еще, не будет ли это код слишком загромождать и утяжелять? Попадались страницы с HTML на 300 КБ, но это явно не идеал.

Зимин Дмитрий
22 марта 2008

Я немного поиграл бы с отступами, объединив визуально иконки в группы. Иконку «удалить» чуть отнести от остальных, на всякий случай.

Кстати, массовые операции запуска, остановки и удаления — это понятно. А вот «изменить» при множественном выборе возможна? Если нет, то ее надо будет блокировать.

Сергей Луковкин
23 марта 2008

Думаю, плавающую панель инструментов здесь делать не стоит.

Если плавающая панель работает для каждого отдельного элемента, то она должна быть дополнительной, а статичная основной. Например, из 100 отображаемых кампаний нужно приостановить или удалить 97: при использовании статичной панели потребуется 5 действий, а при пользовании индивидуальной панели для каждой кампании — 97.

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

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

Кстати, кнопка «Настроить» работает только для одной отдельной кампании, поэтому ее вообще не должно существовать – название каждой кампании должно быть ссылкой, при нажатии на которую осуществляется переход на страницу настройки.

Денис Братчук
24 марта 2008

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Раскин вскользь говорит: «большинство людей из той культуры, на которую этот интерфейс ориентирован» 1




Недавно всплыло

1 Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1 7 Практика: формулировка полезного действия 8