Сообщество
FAQ
Логин
Пароль
Войти при помощи
Кстати, вы можете
Установить drebedengi.ru на свой сервер.
Общение / Веб версия / Замечания по интерфейсу

Замечания по интерфейсу

Владимир
18 октября 2014 15:44
Добрый день!

Сервис классный, пользуюсь уже 4 года. Прошлогодний релиз 2.0 в целом произвёл приятное впечатление, но есть несколько пожеланий (в порядке уменьшения значимости):

1) Периодически элементы скачут: например, при открытии страницы Ввода операций, правая колонка (блоки остатков и планирования) появляется не сразу, поэтому скачет центральный блок (жёлтый). Также при появлении/скрытии скролла (например, при переходам по вкладкам расходы/доходы) ширина страницы изменяется на ширину скролла, т.е. некоторые элементы опять же, скачут;

2) Избавьте облака категорий, тегов и шаблонов от этих запятых, они там совершенно ни к чему! И сделайте что-нибудь с выделением в этих блоках - оно ужасно (как цветом, так и формой);

3) Поменьше жирного шрифта. В частности, в заголовках - он добавляет совсем не нужную тяжесть;

4) Уменьшите блоки остатков и планирования с главной, лучше пусть будет больше свободного места между блоками;

5) Уберите из поля комментария значение по умолчанию "Комментарии и теги". Вместо этого укажите placeholder;

6) Установите запрет на выделение и обводку активных элементов (вкладок, dashed-ссылок и т.д.): user-select: none и outline: none;

Для себя я сделал костыль, исправляющий некоторые из этих недостатков, можете посмотреть, что у меня получилось, добавив этот стиль: https://www.dropbox.com/s/99jjneyx0isx4x3/www.drebedengi.ru.css?dl=1
Admin
18 октября 2014 22:39
Здравствуйте.
Спасибо за предложение, примем к сведению.

Было бы интересно вместо ссылки (что у вас получилось) показать скриншоты с пояснениями, что именно получилось (а если от прыгания избавились, то видео было классно).
Владимир
19 октября 2014 01:26
Не вопрос, вот чистый скриншот:
http://imgur.com/8VJyWhJ,Jhx6Wzs#0
Вот с пояснениями:
http://imgur.com/8VJyWhJ,Jhx6Wzs#1

Видео скачек:
https://www.dropbox.com/s/n780692s2ss1siv/drebedengi_before.avi?dl=0

После некоторых манипуляций остался только скачок при переходе на страницу ввода операций (правая колонка появляется с задержкой):
https://www.dropbox.com/s/gi1tpehyi07zuqr/drebedengi_after.avi?dl=0
Admin
19 октября 2014 11:41
wrumly Пишет:
Вот с пояснениями:
http://imgur.com/8VJyWhJ,...Wzs#1
Спасибо, взяли на заметку.
Теги неплохо выглядят, но вот как их деревом отобразить?

Запятые в облаке категорий нужны, без них категории содержащие пробел будут выглядеть как две разные категории. Запятая тоже не 100% решение, но по крайней мере названий, содержащих запятую меньше, чем пробел. Лучше видимо так-же как вы с тегами поступили сделать.
Admin
19 октября 2014 11:44
А как дела с кросс-браузерностью этого решения?
Ilyan
19 октября 2014 13:04
Admin Пишет:
без них категории содержащие пробел будут выглядеть как две разные категории
Ничего подобного:

Во-первых, пустое расстояние между категориями по ширине раза в 3 больше, чем пробел внутри категории (а категорий, содержащих 3 пробела подряд еще меньше, чем содержащих запятую).

Во-вторых, очень часто соседние категории имеют разный шрифта, делая их ещё более различимыми.
mikhael.vk
19 октября 2014 13:21
Мне понравился интерфейс на скриншотах, на мой взгляд более легкий.
С рублями вообще огонь :). Полоска планирования бюджета совсем по другому смотрится, чем стандартная.
Admin
19 октября 2014 15:44
Ilyan Пишет:
Во-первых, пустое расстояние между категориями по ширине раза в 3 больше, чем пробел внутри категории (а категорий, содержащих 3 пробела подряд еще меньше, чем содержащих запятую).

Во-вторых, очень часто соседние категории имеют разный шрифта, делая их ещё более различимыми.
1. Не убедительно. Всё равно сливаются 3 или 1 пробел - визуально не различимо.
2. То же не убедительно. Часто имеют, а часто и не имеют.
Ilyan
19 октября 2014 20:06
https://drive.google.com/file/d/0By50NczJWxY2N1pUS19NTXpaQ1U/view?usp=sharing

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

Что у вас с чем сливается?
Admin
19 октября 2014 20:51
Ilyan Пишет:
Вот облако моих источников дохода с убранными запятыми.
Есть одинаковые размеры шрифтов.

Что у вас с чем сливается?
Вопрос не по существу. Ваше конкретное облако и что конкретно сливается "у нас" - не очень важно.

Бывают облака с бОльшим количеством одинаковых шрифтов и пробелов. Но и в вашем примере "проценты алкоголь" надо сначала прочитать и понять, чтобы идентифицировать два разных элемента. Просто вы к нему привыкли и воспринимаете субъективно.
Ilyan
20 октября 2014 12:05
Admin Пишет:
Просто вы к нему привыкли и воспринимаете субъективно.
Так в этом-то и дело, что КАЖДЫЙ пользователь настолько привыкает к СВОЕМУ облаку категорий, что разделители становятся не важны. Да, первые недели, когда и сами категории в новинку, и когда облако регулярно меняется, элементы могут немного сливаться. Но на сотый, тысячный раз эти запятые - просто мусор, который мы научаемся игнорировать. Если честно, я эти запятые уже совершенно не замечаю, но это плохо выглядит для новичка, потому что это разрыв шаблона, ведь никто больше так не делает.

Если вы заботитесь о читабельности и сливании - лучше увеличьте междустрочное расстояние.

А если заботитесь ещё и об удобстве пользователя, сделайте, наконец, сортировку облака ПО АЛФАВИТУ. Цель этого элемента формы - помочь максимально быстро выбрать наиболее часто используемые категории. И если уж использовать для этого облако (что, кстати, неочевидно) с постоянной сортировкой, то ПОНЯТНЫЙ ПОЛЬЗОВАТЕЛЮ порядок сортировки еще более упростил бы визуальный поиск нужной категории.
RsH
20 октября 2014 15:11
подскажите как можно локально натянуть стиль выложенный в начале темы?
или может админ сделает в настройках возможность :) применять стили?
Денис
20 октября 2014 17:10
RsH Пишет:
подскажите как можно локально натянуть стиль выложенный в начале темы? или может админ сделает в настройках возможность :) применять стили?
Скачиваете файл из первого сообщения, устанавливаете расширение для браузера, в Chrome называется Styler, например. Открываете Дребеденьги, нажмаете на появившейся кнопочке и в верхнее поле (где написано CSS) копируете содержимое скачанного ранее файла.
Денис
20 октября 2014 17:14
wrumly, спасибо за ваш труд :) Только у меня тэги, почему то с точкой отображаются. Вот как http://itmag.es/3yF23
Ilyan
20 октября 2014 17:35
Денис Пишет:
Скачиваете файл из первого сообщения
Соблазн велик...

Но если все поставят себе удобный стиль, кто укажет админу на его ошибки юзабилити? :)))
Владимир
20 октября 2014 17:36
Потому что в этом стиле сплошные хаки и костыли. На разных системах выглядеть может по-разному, где-то что-то может совсем съехать/сломаться. Поэтому вместо подключения этого стиля, прошу всех заинтересовавшихся отписываться здесь, чтобы администрация/разрабочики могли судить о целесообразности изменений.
Денис
20 октября 2014 17:42
Ilyan Пишет:
Денис Пишет:Скачиваете файл из первого сообщенияСоблазн велик... Но если все поставят себе удобный стиль, кто укажет админу на его ошибки юзабилити? :)))
Кстати, только сейчас заметил, что в стиле, предложенном wrumly нет выпадающего списка категорий :)
Владимир
20 октября 2014 17:47
Денис Пишет:
Кстати, только сейчас заметил, что в стиле, предложенном wrumly нет выпадающего списка категорий :)
Он скрывается, если отображется облако категорий.
RsH
21 октября 2014 07:56
в предложенном стиле много правильных вещей, потому и хочу попробовать.

а администрация ресурса, по опыту, не применит, то что как-то не укладывается в их представление о дизайне.
Бисквит
24 октября 2014 14:18
Напишу в этой теме, чтоб не создавать новую. После последнего обновления обновилось выпадающее меню с категориями трат.

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

Второй вопрос серьезнее - в этом самом меню при скроле мышкой на 1 шаг, выделенная строка прыгает сразу на 6 позиций, что является просто раздражителем для зрения, т.к. постоянно приходится сосредотачиваться и вглядываться в список. И еще может есть смысл сделать этот список немного подлиннее? Сейчас в раскрытом списке помещается всего 9 строк, а в купе с вышеуказанным косяком с прокруткой пользоваться списком очень неприятно.
Алексей
24 октября 2014 15:47
Полностью согласен с Бисквит. Яркая синяя полоса, мелкий шрифт выпадающего меню и прыгающий скрол сделали очень неприятной саму процедуру ввода трат. Надеюсь, что на это будет обращено внимание администрацией.
Admin
24 октября 2014 17:10
Синяя полоса - примерно настолько же синяя, насколько в стандартном контроле популярных браузеров. Насчёт скролла - да возможно он не очень плавный, примем к сведению. Но у нас он сдвигается на 4 позиции. Уточните какой у вас браузер и на сколько позиций скролит у вас стандартный контрол?

Сделали побольше и единый шрифт, а также увеличили высоту контейнера. Правда с вкупе с увеличенным шрифтом это больше пунктов не прибавило.
Бисквит
24 октября 2014 17:41
Firefox 32.0.3 - прыгает на 6 строк (если стартовую считать за первую. Если не считать - то на 5). В Хроме 38.0.2125.104 прыгает на 5 строк (если стартовую считать за первую. Если не считать - то на 4).
Admin
24 октября 2014 18:54
Сделали шаг скроллинга в два раза меньше.
Так лучше?
Бисквит
24 октября 2014 19:42
Да, так просто отлично (не считая синей полоски, но это лично мой загон). Что поломалось - список в категории Доходы теперь тоже длинный, но т.к. категорий доходов у меня всего пять, то большая половина раскрытого списка - просто пустое белое место.
Ilyan
24 октября 2014 20:27
Admin Пишет:
насколько в стандартном контроле популярных браузеров
Десятки раз я указывал на то, что есть определенные сложившиеся стандарты, на которые в дребеденьгах кладут с прибором, и вот наконец-то признано существование хоть каких-то стандартов.

Так держать! :)
Ilyan
24 октября 2014 20:30
Спасибо за увеличение высоты выпадающего списка!

Хотя, учитывая мои >150 категорий хотелось бы даже еще больше :)
Ilyan
24 октября 2014 20:34
На синий цвет не обратил внимания, но да, это выделение выбивается из общего стиля. Зачем? :)
Admin
24 октября 2014 21:37
Бисквит Пишет:
Что поломалось - список в категории Доходы теперь тоже длинный
Поправили.
Алексей
25 октября 2014 15:42
Спасибо, так гораздо приятнее и удобнее.
Алексей
25 октября 2014 15:52
Хотя, зачем нужна именно синяя полоса в таком дизайне для меня так и осталось загадкой.
Александр
30 октября 2014 14:49
wrumly Пишет:
Денис Пишет:Кстати, только сейчас заметил, что в стиле, предложенном wrumly нет выпадающего списка категорий :)Он скрывается, если отображется облако категорий.
очень понравился Ваш стиль, но не хватает одновременного отображения списка категорий и облака тэгов...
подскажите, как сделать, чтоб показывало и список, и облако?
Бисквит
30 октября 2014 14:59
Я кажется понял что значит "Синяя полоса - примерно настолько же синяя, насколько в стандартном контроле популярных браузеров". Такой синий цвет мне припоминается на маках в сафари, нет? Полагаю, что разработчики сидят под макосью и что бы у них было все органично и красиво, сделали под себя строку выделения под цвет это оси. Я прав?
Чтобы отвечать на сообщения - зарегистрируйтесь и войдите в личный кабинет.
© drebedengi.ru 2007 - 2017  |  Мобильная версия  |  Карта сайта  |  API интеграции  |  Обратная связь  |   English