|
Владимир
|
|
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 Пишет: Спасибо, взяли на заметку.
Теги неплохо выглядят, но вот как их деревом отобразить?
Запятые в облаке категорий нужны, без них категории содержащие пробел будут выглядеть как две разные категории. Запятая тоже не 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
|
|
подскажите как можно локально натянуть стиль выложенный в начале темы?
или может админ сделает в настройках возможность :) применять стили?
|
|
|
|
NO NAME
|
|
20 октября 2014 17:10
|
RsH Пишет: подскажите как можно локально натянуть стиль выложенный в начале темы? или может админ сделает в настройках возможность :) применять стили? Скачиваете файл из первого сообщения, устанавливаете расширение для браузера, в Chrome называется Styler, например. Открываете Дребеденьги, нажмаете на появившейся кнопочке и в верхнее поле (где написано CSS) копируете содержимое скачанного ранее файла.
|
|
|
|
NO NAME
|
|
20 октября 2014 17:14
|
|
wrumly, спасибо за ваш труд :) Только у меня тэги, почему то с точкой отображаются. Вот как http://itmag.es/3yF23
|
|
|
|
Ilyan
|
|
20 октября 2014 17:35
|
Денис Пишет: Скачиваете файл из первого сообщения Соблазн велик...
Но если все поставят себе удобный стиль, кто укажет админу на его ошибки юзабилити? :)))
|
|
|
|
Владимир
|
|
20 октября 2014 17:36
|
|
Потому что в этом стиле сплошные хаки и костыли. На разных системах выглядеть может по-разному, где-то что-то может совсем съехать/сломаться. Поэтому вместо подключения этого стиля, прошу всех заинтересовавшихся отписываться здесь, чтобы администрация/разрабочики могли судить о целесообразности изменений.
|
|
|
|
NO NAME
|
|
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
|
|
Я кажется понял что значит "Синяя полоса - примерно настолько же синяя, насколько в стандартном контроле популярных браузеров". Такой синий цвет мне припоминается на маках в сафари, нет? Полагаю, что разработчики сидят под макосью и что бы у них было все органично и красиво, сделали под себя строку выделения под цвет это оси. Я прав?
|
|
|
