Практика

1.6 Написать обращение

Отправлено на adm@rdtc.ru:

Генеральному директору ЗАО «РЦТК»
Владимиру Петровичу Шургалину
от абонента-дизайнера

Обращение

Уважаемый Владимир Петрович.

Уже два года я являюсь абонентом новокузнецкого провайдера «РЦТК» и исправно оплачиваю предоставляемые услуги. Но со временем моё впечатление от работы компании становится всё хуже и хуже.

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

Дизайн «Кладовки» ужасен. Пользоваться сайтом неудобно и сложно, а недавний редизайн ваших основных ресурсов, к сожалению, не оставляет надежды на самостоятельное изменение ситуации к лучшему. О постоянных инцидентах, связанных с произволом, хамством и некомпетентностью модераторов хаба, я даже не говорю — это притча во языцах.

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

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

Те, же кто хочет что-то изменить, сталкивается со стеной непонимания и агрессии со стороны зажравшихся лентяев, не способных поднять свой зад ради дела, и вся энергия которых тратится лишь на прикрывание собственной недееспособности. Естественно, что о клиентах компании они даже не думают. Да никогда и не думали. А зачем, если «быдло и так платит»?!

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

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

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

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

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

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

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

Я хорошо понимаю, что вы занятой человек и вправе проигнорировать мои слова. И что кто-то из упомянутого персонала вашей компании сделает всё возможное, чтобы вы ничего не узнали. Однако, я надеюсь, что данное обращение всё-таки дойдет до вас, вы разберетесь в ситуации и инициируете действия для улучшения обстановки.

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

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

Спасибо.

Стандартный
Практика

1.5 Нарисовать дизайн

Возьмем разработанную модульную сетку и нарисуем по ней дизайн.

Будем исходить из принципа разумности и акцентироваться на полезном контенте, а не на оформительских элементах.

Проектируем, рисуем и получаем результат.

Страница со списком раздач:

Список раздач

C сеткой:

Список раздач с сеткой

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

Ссылка «Избранные» ведет на страницу со списком избранных раздач. Желтая звездочка в описании раздачи показывает, что данная раздача уже находится в списке избранных.

Ссылка «Все» открывает меню фильтра.

Фильтр

С сеткой:

Фильтр по сетке

Если убрать все галочки, то будет показан список всех раздач в порядке их появления.

Если отметить галочкой хотя бы один пункт в столбце, по данному свойству раздачи будет применен фильтр. Например, на скриншоте сверху показан фильтр со значением «все английские комедии 2010 года в любом формате».

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

Все второстепенные ссылки собраны в два выпадающих меню.

Ответы на вопросы

Сайты

Поиск можно вести по конкретным категориям.

Поиск

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

Самое интересное, что фиксированный элемент, на основе которого вычислялся размер модуля, на практике оказался вовсе не таким фиксированным.

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

Правила изменения размера обложки

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

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

Детали раздачи

C сеткой:

Детали по сетке

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

Подробности о формате видео и аудио каждого файла убраны в всплывающий блок.

Детали деталей

Для различного типа скачиваемого контента — разные кнопки. Каждая кнопка имеет три состояния: обычное, при наведении и при нажатии.

Кнопки

Стандартный
Практика

1.4 Разработать модульную сетку

Модульная сетка существенно упростит отрисовку дизайн-макетов и последующую верстку шаблонов.

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

Сначала определим следующие параметры шрифта и микромодуля:

  • шрифт: Arial,
  • базовый размер кегля: 12 пикселей,
  • базовая высота строки: 18 пикселей,

и, как следствие,

  • ширина середника: 18 пикселей,
  • размер микромодуля: 18×18 пикселей.

Имя шрифта мы унаследовали от текущих стилей оформления «Кладовки».

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

Микромодуль

Далее определимся с размерами модуля.

Сначала определим ширину.

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

Размер картинки составляет 133×180 пикселя.

Обложка диска

133 не кратно 18.

Рассчитаем новую ширину, наиболее близкую к оригинальной и кратную 18. При этом, для большей гибкости создаваемой сетки, «впишем» в ширину картинки не один, а два модуля и один середник.

Считаем и получаем ширину картинки в 7 середников, или в 126 пикселей.

Новая ширина картинки

Далее вычитаем из ширины картинки один середник и результат делим пополам. Таким образом, ширина модуля равна 54 пикселям.

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

Опять же, для гибкости, «вписывая» по высоте в картинку два модуля и один середник, получаем, что высота модуля равна 72 пикселя (4 базовых линии).

4 модуля в одной картинке

С модулем определились.

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

Первый момент.

Краткое описание раздачи будет располагаться справа от обложки. Определим, что описание должно занимать примерно такую же площадь, что и картинка — 2×2 модуля. Пусть между обложкой и описанием будет зазор в один середник.

Обложка с описанием

Обложка и описание вместе образуют блок раздачи.

Второй момент.

Разделим страницу на две основных секции.

Основные секции

В секции «А» будут располагаться: логотип, меню, поиск и другие функциональные элементы.

Секция «Б» будет полностью занята блоками раздач.

Чтобы эффективно использовать и заполнять доступное экранное место в секции «Б», каждый блок раздачи будет выполнен в виде «плавающего» элемента, стремящегося влево.

Определим, что в данном случае пользователь должен считывать блоки построчно.

Порядок считывания раздач

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

Отступы между блоками раздач

Необходимо выполнить два условия:

  1. Горизонтальный отступ между блоками h должен быть больше, чем середник между картинкой и описанием раздачи.
  2. Для сохранения задуманного порядка считывания блоков, горизонтальный отступ между блоками h должен быть меньше, чем вертикальный отступ v.

Исходя из условий, определим, что

  • горизонтальный отступ h равен 36 пикселям (2 середника),
  • а вертикальный отступ v — 54 пикселям (3 базовых линии).

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

Подготавливаем паттерн.

Паттерн

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

Макет, залитый паттерном

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

Подбираем ширину и высоту макета (получилось 954 и 755 пикселей, соответственно).

Макет с сеткой

Модульная сетка готова.

Стандартный
Практика

1.3 Выбрать цветовую палитру

Цвет — основа визуального образа.

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

Рассмотрим имеющуюся цветовую схему ресурса «Кладовка». Проанализируем текущий CSS-файл и выделим из него используемую палитру.

Цветовая палитра

Базовые цвета: зеленый, оранжевый, черный.

Явными недостатками полученной палитры являются:

  • преимущество ярких красок,
  • контрастирующие перепады насыщенности в градациях
  • и избыточность набора (для примера сравните #555555 с #565656 или первые пять цветов оранжевого между собой) .

Можно исправить текущую схему, убрав лишнее и добавив необходимое. Однако, мы пойдем другим путём и создадим новую палитру.

При этом постараемся придерживаться тематики «вездерастущих тыкв», чтобы вписаться в общий дизайн сервисов компании «РЦТК».

Для достижения цветовой гармонии воспользуемся природными сочетаниями. Выберем в интернете подходящую фотографию по запросу «Тыква».

Тыквы на бахче

Проведем пикселизацию.

Мозайка смежных цветов

Выделим градации четырех базовых цветов: зеленого, оранжевого, коричневого и серо-буро-малинового.

Палитра градаций

Протестируем полученную палитру.

Тест палитры

Хорошая.

Стандартный
Практика

1.2 Добавить нужное

Ни один сервис не идеален.

Некоторые недостатки особенно сильно проявляются со временем.

После года использования ресурса «Кладовка», могу с уверенностью сделать вывод, что на этом сайте не хватает следующих вещей:

  1. Поиск (фильтрация) раздач по стране, году выпуска, режиссеру и нескольким жанрам одновременно.
  2. Избранные раздачи и обновления в избранных раздачах.
    Быстрый доступ к отмеченным раздачам и оповещение о новых выпусках в любимых сериалах.
  3. Возможность просматривать только новые раздачи.
    Новые — это те раздачи, которые появились после предыдущего посещения сервиса.

Спроектировать и реализовать эти функции — сущая ерунда.

Даже для программистов компании «РЦТК».

Что мешает это сделать?

Лень.

Стандартный
Практика

1.1 Убрать все лишнее

У новокузнецкого провайдера «РЦТК» есть внутренний P2P-ресурс «Кладовка». У ресурса есть видео-раздел и ужасный интерфейс.

Сейчас мы это поправим.

Весь интерфейс видео-раздела — это две страницы:

  • список раздач
  • и страница с детальной информацией о раздаче.

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

Список раздач

Красными блоками отмечены лишние элементы. Синей линией отмечена нижняя граница первого экрана на моем ноутбуке в браузере Chrome.

Причины отказа от указанных элементов, сверху вниз:

  • логотип и поиск дублируются;
  • мне не надо регистрироваться или авторизовываться, если провайдер знает мой IP, логин и пароль подключения к интернету;
  • я не должен смотреть рекламу на сайте провайдера, если плачу ему за интернет;
  • рейтинг, основанный на количестве загрузок, абсолютно нерепрезентативный;
  • секция «Розыск файлов» большинству казуальных пользователей не нужна;
  • большая часть описания раздачи избыточна и не несет смысловой нагрузки;
  • в левой колонке макета много неиспользуемого пространства;
  • счетчик не интересен посетителям, а «важное замечание о программе Flylink» дублирует ссылку из шапки.

Подробнее стоит пояснить избыточность и бессмысленность описания раздачи.

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

Режиссер и список актеров избыточны потому, что, как правило, лица известных актеров размещают на постерах крупным планом, а фамилии известных режиссеров пишут большими буквами. Имена же неизвестных актеров всё равно никому ни о чем не говорят.

«Качество фильма по мнению редактора» — полная чушь, поскольку в названии раздачи уже присутствует описание типа раздачи (CamRip, DVDRip, HDRip и так далее), что говорит о качестве записи красноречивее куцой оценки редактора.

Показ количества комментариев следует убрать, потому что исчезнут сами комментарии(см. далее).

Аналогичная ситуация у страницы с детальной информацией о раздаче.

Детали раздачи

На этой странице нормальному человеку абсолютно до лампочки

  • кто одобрил раздачу,
  • какое место и в каком рейтинге занимает раздающий,
  • кто и что написал в качестве комментария к раздаче.

Блок с жалобами и благодарностями удаляем вследствие его абсурдности и функциональной неоправданности.

Чем «Ссылка не работает» отличается от «Пожаловаться»? Не понятно.

Что произойдет, если я нажму «Сказать спасибо»? Ничего.

Зачем всё это нужно?

Не нужно.

Стандартный