Павел Моисеенко

дизайн

Редизайн Кинопоиска

Я активный пользователь Кинопоиска. Сижу часами, чтобы найти интересное кино, ставлю оценки просмотренным фильмам (3114 фильмов!), растасовываю их по тематическим папкам. У меня там даже есть френды — кинокритики и киноманы знакомые еще со времен ЖЖ. В общем, я пользователь-задрот.

Яндекс в вакансии дизайнера Кинопоиска предлагает перерисовать страницу о Мартине Скорсезе. Кинопоиск — сложный сервис. Я не знаю как его используют другие люди. Поэтому те дизайнерские решения, которые я предлагаю, решают мои задачи. Понимаю, что для массового использования они могут не подойти. Кинопоиск помогает мне ответить на вопрос: «А какой бы фильм посмотреть?». Это станет мерилом всех решений: если оно помогает ответить на вопрос — решение хорошее, не помогает — в мусорку.

Карточка персонажа

Посмотрим на существующую карточку персонажа. Уберу из нее все, что не помогает в выборе фильма — рост, знак зодиака, супруги:
kinopoisk_persone_card_old@2x

Добавлю биографию:
kinopoisk_persone_card@2x

Чтобы начать. Представим такую ситуацию: я слышал, что Мартин Скорсезе выдающийся режиссер и захотел что-нибудь у него посмотреть. У Скорсезе 56 фильмов. С чего начать? Очевидно, с самого известного и значимого. Кинопоиск может посоветовать эти фильмы. Алгоритм такой: высокая оценка пользователей Кинопоиска и imdb (зрительская симпатия) + количество оценок (популярность) + нахождение в списках лучших фильмов, участников кинофестивалей (значимость) + можно скачать (доступность) – просмотренные фильмы (не показывать то, что я уже видел).

Если я уже отметил все основные фильмы как просмотренные, то показываются редкие:
kinopoisk_persone_card_rarefilms@2x

Биография. Я изучаю творчество режиссера так: в одной вкладке смотрю фильмографию на Кинопоиске, в другой читаю Википедию. Неплохо бы их совместить. Из биографии я узнаю, что на Скорсезе оказали влияние Кинг Видор, Джон Хьюстон и другие. Узнаю, что Таксисит считается самым резонансным фильмом режиссера. Чем больше таких культурологических связей, тем лучше.

На карточку персонажа поместим лид из Википедийной биографии: так называют один, два абзаца выжимки из статьи. Полная биография на отдельной странице. О! Интересная идея: биография, рассказанная фильмами. У Кинопоиска солидная база фотографий. Но смотреть их просто так неинтересно. Объединим их с потоком текста:
kinopoisk_persone_bio

В той же статье из Википедии я узнаю 12 любимых фильмов Скорсезе. Удачный для привлечения внимания формат:
kinopoisk_persone_card_likefilms@2x
Недостаточно вывалить на человека 12 названий фильмов. Если название не знакомо, то оно ни о чем не говорит. Универсальный формат записи: название фильма, режиссер, страна, год

Фильмография

Модуль фильма в списке:
kinopoisk_film_card1@2x
Симпатичные иконки фестивальных наград я взял с нового Кинопоиска

Если я пометил фильм как просмотренный, подсветим модуль и напишем мою оценку:
kinopoisk_film_card2@2x

Название фильма на оригинале нужно из-за странностей перевода. Кинопрокатчики, порой, переводят так:
kinopoisk_film_originname

Награды кинофестивалей имеют свой вес. Каннская ветвь важнее Оскара за грим и важнее Выборгского фестиваля фильмов о животных. Это значит, что значительные награды выводятся отдельно, а второстепенные складываются в стопку:
kinopoisk_film_card_festival

Рутрекер. Пробежавшись взглядом по фильмографии я отмечаю фильмы, которые есть в интернете. Уже из них выбираю что посмотреть. Рутрекер — реально крупная база. Амедиатека, Иви и прочие он-лайн кинотеатры, которые вставляет Яндекс в качестве партнера — полное фуфло. Вконтакте подойдет в качестве альтернативы, если не хочется скачивать.

Малые жанры. Скорсезе снимал клипы, рекламу, короткометражки, но не это сделало его киношной знаменитостью. Поэтому Кинопоиск выделяет короткометражки иконкой и надписью. Получается, что короткометражка приобретает больший визуальный вес в сравнении с полнометражными фильмами:
Снимок экрана 2016-04-02 в 17.01.38

Должно быть наоборот:
kinopoisk_film_format

Соберу все вместе:
kinopoisk_film_card3@2x
Мне ближе естественная хронология — от старых к новым

Из фильмографии я убрал оценки пользователей (на странице фильма они останутся). Вот почему. Большинство фильмов пользователи оценивают на 6–7 баллов. Это нейтральная оценка, которая ничего не сообщает. А сообщает отклонение. Оценка в 1–4 балла говорит, что фильм, скорее всего трешовый, и не стоит тратить на него время. Слишком высокая оценка (8–10) тоже настораживает. Как правило, ее ставят рядовым, но недавно вышедшим в прокат фильмам. Со временем их оценка упадет. Или безмерно сентиментальным киношкам, бьющим наотмашь по чувствительному зрителю.

kinopoisk_film_rate@2x

Рекомендации

Подборки. Кинопоиск уже давно составляет тематические подборки фильмов. Это замечательно, потому что они помогают узнать новое. Осталось придумать систему благодаря которой подборки будут контекстно выводиться на страницах персонажей и фильмов. Например, я нахожусь на карточке Казахского фильма. Сбоку выводиться подборка:
kinopoisk_podborki1@2x

Связи. В моей голове существует два типа фильмов, которые я хочу посмотреть:
1. Фильмы о которых я знаю. Это простой сценарий — с ним нет никаких проблем.
2. Фильмы о которых я не знаю. Например, я увлекаюсь отечественным кинематографом 90-х годов. Я посмотрел всплывающие сразу в памяти фильмы (Балабанова, Хотиненко, Месхиева). Прошелся по списку режиссеров-ветеранов и посмотрел, снимали ли они что-нибудь в 90-е. Гуглю, читаю Википедию, нахожу статьи в киножурналах. Что дальше? А дальше я изучаю связи. Кинопоиск мне может помочь в этом.

Допустим, мне понравился фильм «Гонгофер». Очевидное — посмотреть другие фильмы режиссера. Куда копать дальше? Стоит прошерстить фильмографию сценариста и продюсера, изучить публикации киноведов (в них, как правило, есть отсылки к другим фильмам). Киностудия может иметь значение, особенно, для советских фильмов. «Грузия-фильм» — это анклав своего особенного кино, а студия ПИЭФ — знак качества. Свой корректирующий балл вносят оценки друзей (чем выше оценка, тем выше приоритет в рекомендации), год (современники выше в приоритете), страна. Кинопоиск должен агрегировать эти связи:
kinopoisk_link_sheme@2x

Связи показываются на странице фильма:
kinopoisk_link@2x

И еще

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

Снимок-экрана-2016-04-06-в-21.09.03

Отзывы. Повысить в приоритете профессиональные отзывы. Это публикации критиков, статьи в прессе, аналитика от киноведов. Любительские отзывы понизить в приоритете. Авторами отзывов движет сильное впечатление, поэтому они склонны к радикализму — либо перехваливают фильм, либо слишком ругают.

kinopoisk_text

8 комментариев

, , , ,

Приемы верстки сложных форм

Несколько приемов, которые я использую при работе с длинными формами. Эти приемы помогают сделать форму аккуратнее.

1. Форма читается как связное предложение. Такой подход помогает быстрее считывать содержимое. Еще это хорошо для порядка — все поля формы устроены одинаково.
Group 5@2x
Если пункт начинается с предлога, пишу его с маленькой буквы

Усложним. Добавим инпут:
Group6@2x

Еще усложним. Добавим вложенность:
Group7@2x
Заголовок «Интересы» объединяет все пункты формы

Такую форму можно наращивать слой за слоем. Крепкая конструкция выдержит.

Запутанные формулировки — частая беда форм. Антипример:
Снимок экрана 2016-03-28 в 13.02.19
Три раза сказали одно и то же, но понятнее не стало. Гугл Эдвордз

booking_form
Расплывчатая подпись к чекбоксу дезориентирует. Что произойдет по нажатию? Букинг

Мой вариант:
booking_form_after

2. Управляющие элементы скрыты пока не нажат чекбокс. Удобно когда надо спрятать необязательные функции.
screencast 2016-03-24 00-19-09
Формулировка начинается с действия (показать, расширить, указать, исключить)

Свитч-переключатель — это тот же чекбокс:
ios_switch

3. По дефолту предзаполнены максимально широкие настройки. Протыкивая форму, человек уточняет параметры. Такую форму, вообще, можно не заполнять, если человек согласен с дефолтной настройкой.
пол_возраст@2x
Максимально широкая настройка по дефолту. Если человеку надо, он уточнит пол и возраст

По похожему принципу устроены настройки на Маке:
macos_setting
Все уже нормально работает, но, если надо, можно уточнить настройку

Прием работает не во всех предметных сферах.

4. Чередование ритма. Эстетически мне нравится сбивать ритм однообразных чекбоксов и радиобатонов нестандартным контролом. Чтобы выделение было осмысленно, нужно взять наиболее важный пункт.
Group3@2x
Способ траты бюджета — важная опция. От нее существенно зависит ход рекламной кампании. Поэтому выделяем контролы выбора (по логике — это обычный радиобатон) и пишем подсказки

Какие знаете примеры хорошо сделанных форм?

13 комментариев

, , ,

1 комментарий

, , , ,

«Дизайн — это работа» Майка Монтейро (2012)

dizajn-eto-rabota

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

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

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

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

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

Правильная книга.

Нет комментариев

, , ,

Комик-санс — прекрасный шрифт

Есть такое распространенное поверие, мол, Комик-санс — безапелляционный отстой и использовать его нельзя. Это глупый предрассудок, ведь крепкая верстка важнее выбора шрифта:

Аккуратность важнее:
IMG_4313

Уместность важнее:
IMG_8317

Умеренность важнее:
IMG_3726

А с Комик-сансом все в порядке.

Нет комментариев

,

Прогресс-бар поездки в транспорте

Прогресс-бар в автобусе из аэропорта в город. Тут есть все, что нужно: место отправления и прибытия, время прибытия, а главное, шкала оставшегося пути.
IMG_4515
Швеция

Прогресс-бар в поезде.
IMG_8670
Франция

Нет комментариев

, , , , , ,

Модульная верстка: текст поверх фотографий

Формат «картинка + текст поверх» за несколько лет стал базовым в дизайне СМИ. Формат автоматизирован — текст и картинки автоматически подтягиваются из базы, а поверх картинки кладется полупрозрачный черный слой.

Градиенты и затемнения — это всегда компромисс между сохранением качества картинки и читаемости текста. Картинки запороты, а текст на грани читаемости. Ничего хорошего:
BB837501-006E-418A-BB12-D26E3ED74FBE
Арзамас

Батарея одинаковых серых модулей заполонила интернет:
battery
Медуза до редизайна, Ирк.ру, Охмаймастер

Формат плохо подходит для иллюстраций с контрастными мелкими деталями:
5EB31C79-F824-4083-9617-5AACF7541A36
Афиша-город

Самые сильные градиенты не спасают:
CBAC4535-E211-4440-9089-DC37DE4547ED
Афиша-воздух

Часто в модуле выводятся данные о просмотрах и комментариях. Метаданные — это мусор:
627AA36D-9187-484A-B2FA-7678D6D09AF9
Иконка видео громоздится на заголовок, просмотры и комментарии влезают на описание. Охмаймастер

Формат не нов:
E65ECD6D-42AA-4944-BC0C-DC67D6E4A4EF
Чтобы название газеты и информация о выпуске читалась участок под фото высветлили. The Oregonian, выпуск 15 августа 1945

Редактор не контролирует результат: тексты и фотографии лягут друг на друга как получится. Всю суть отражает картинка из интернета:
3FD852A9-6553-4113-8605-5EEF5112FB3F

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

1. Не растягивать иллюстрацию на весь модуль. Иллюстрация займет часть модуля. Выравнивание иллюстрации относительно текста — это отдельная большая тема. По такому пути обычно оформляют книжные обложки.
lam_moduli
Обтравленные иллюстрации на нейтральном фоне выглядят опрятно. Лук эт ми и Виллэдж

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

Оба пути предполагают ручную работу. Редактор с умом должен подобрать иллюстрации. Не каждая иллюстрация подойдет — это дополнительно усложняет работу.

3. Отделить текст от картинки. Это бронебойная защита. Текст читается прекрасно, картинку видно целиком, выглядит олдскульно:
5B906850-75D6-49D3-A8AB-E3B01895DB04

2 комментария

, ,

Инфографика Медузы

Время от времени на Медузе публикуется инфографика. На мой взгляд, можно лучше.

B06If6bjzx1MQ531zfUz7g
Возьмем для примера выпуск о ЖКХ. Проблемы: канцелярские формулировки, абстрактные цифры, мало конкретики. В цифрах спутаны предприятия и население, сельская местность и городская. Цифры не складываются в цельную историю. Все написано капсом. Выделение текста цветом и размером случайно. Почему часть текста серая, часть белая, а еще часть золотая? Да ни почему. Пройдем по пунктам и все исправим.

>1 триллиона рублей общая задолженность населения и предприятий за ЖКХ
С цифрой две проблемы: неточная цифра и космический масштаб.

Больше триллиона это сколько? Идем в интернет, узнаем что 1,025 триллиона. Дополнительно вскрывается что триллион — это общий долг обычных людей и предприятий. Я бы не смешивал их в кучу. Эта инфографика явно не о предприятиях, а их доля в задолженности очень высока. Долг у населения 212 миллиардов. Остальные 813 миллиардов у предприятий.

Космический масштаб. Трудно представить себе 212 миллиардов. Цифру надо привязать к чему-то осязаемому. Так как это Медуза, то, например, к зарплате Сечина. Оказывается, это 350 годовых зарплат Сечина. Ого!

Стилистическая претензия. «Общая задолженность населения» — так говорят чиновники. Переформулируем в «212 миллиардов рублей долг россиян за ЖКХ». Добавляем информацию о среднем долге: «3 962 ₽ средний долг одной семьи». Находим информацию в разбивке по регионам и добавляем самых крупных должников (Северо-Кавказкий федеральный округ):
dolgi_jkh

93 900 000 м² ветхий и аварийный жилищный фонд
Я не знаю что такое жилищный фонд. Вот я считаю что живу в квартире, а не в жилищном фонде. А дача у родителей это жилищный фонд? Идем в интернет и узнаем что жилищный фонд — это все постройки пригодные для постоянного проживания. Дачи, санатории, казармы, кельи — нет. Переименовываем жилищный фонд в дома. Напишем объяснение что такое ветхое и аварийное жилье.

Поехали дальше. 93 900 000 м² — это сколько? К чему вообще площадь, что она поможет понять? Выкидываем.

Уточним данные по регионам. Больше всего ветхого и аварийного жилья в Ингушетии (20,8%), Тыве (19,1%) и Дагестане (18,9%). Меньше всего в Москве (0,3%).

Добавим сводку новостей о ветхом жилье (Медуза же, новости!). Сходим в Яндекс новости и скопируем оттуда:
vethoe_jilie

299 аварий на водопроводе происходило в России ежедневно 2013 году
А какие аварии бывают? В Ачинске лопнула труба? Интересны последствия аварий, например, нет горячей воды — это осязаемо. Однако, таких данных нет. Нет и нет, не будем вымучивать, если история не складывается.

В 34% жилищного фонда нет горячей воды
Идем на сайт Росстата и находим отчет. Выясняем что 34% — общая цифра для города и села. Сельские дома подмешиваются в статистику и увеличивают цифру в два раза. Подозреваю, читатель Медузы не сельский житель, а горожанин. Городские проблемы ему созвучней. Оставим город: в 19% городских домов нет горячей воды. В 72% сельских. Поступаем аналогично с остальной информацией о благоустройстве.

В 20% жилищного фонда нет водопровода
В 10% городских домов. В 48% сельских.

В 25% жилищного фонда нет канализации
В 12% городских домов. В 59% сельских. В формулировках будем попсовей. Нет канализации — значит, нет туалета. Туалет — понятно всем что такое, а канализация — это какое-то инженерное сооружение.

В 32% жилищного фонда нет душа или ванной
В 18% городских домов. В 69% сельских. Вот уже заголовок статьи «В трети российских квартир нет душа или ванной» не бьется с реальностью. Заголовок попсовый, по такому хочется кликнуть. Это хорошо, но неправда — в каждой пятой квартире нет душа и ванной:
blagoustroistvo

10% доходов тратят россияне на оплату ЖКХ
Беда относительных значений в их расплывчатости. Лучше использовать абсолютные в рублях. 5 070 ₽ тратит средний россиянин на оплату ЖКХ. Разобьем эту цифру на составляющие — сколько уходит на газ, воду и так далее.

Все интересно в сравнении. Найдем и добавим цифры сколько платят за ЖКХ в других странах:
jkh_dekompoziciya

Каждый 50-й город в России не имеет системы канализации
«Ничего себе», думаешь, когда видишь такое. Уточним цифры. Идем в Росстат и видим, что в России 1 070 городов. В 98% городов канализация есть. Это значит что в 21-м городе нет канализации. А какие это города? Увы, я не нашел такой информации. Следовало бы перечислить города и для наглядности показать их на карте. Например, так:
kanalizacija

Еще момент. Все данные о благоустройстве за 2013 год. Надо об этом сказать хотя бы в сноске. Дело в том, что актуальные данные публикует Росстат. Следующий отчет выйдет в 2016 году. А пока довольствуемся тем что есть.

Осталось собрать все вместе. Выделяем главное размером и положением. Выстроим историю из цифр. Из истории видно, что ЖКХ ужасное, но люди платят немного. Самое ветхое жилье на Кавказе и там же самые крупные должники. Круговая порука.

Результат:
meduza_jkh

Было и стало:
meduza_before_after

Следующий шаг выделить данные по Москве в отдельный слой. Читатели будут сравнивать обстановку в столице и замкадье. Добавить данные о сборах на капитальный ремонт.

Нет комментариев

,

Юзабельность

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

readymag.com/pavelm/usability/

 

Моя любимая цитата из «Немцев» Александра Терехова:

— Заполняйте квитанцию по образцу «Госпошлина за развод».

Страшным оказалось делом — Эбергард возюкал специально переломанной для сохранности пополам и сращенной изолентой ручкой — 4100000657, ОНКО 37906858 (не уместилось, заперлось в «наименование организации»), р/с 54900000004396847365, подсчитывая нули, а куда писать этот распаскудный КБК, двадцать цифр?! — взял новый бланк, поукладывал цифры тесней, но вдруг задумался: не вбухал ли он «корсчет» в «расчетный»? И где тогда «расчетный»? В образце «расчетного» нету. А в квитанции есть! К нему за стол, как двоечник к отличнику, присоседился мужик в светлых брючках, привел жену на развод — и с тем же напряжением пыхтел меж квитанцией и образцом, а еще жена его — загорелая, закрывшись огромными черными очками, тоже в белом, — ожидала отстраненно: хочешь, решил — пожалуйста, но всё сам, вот он и вглядывался в нули; и Эбергард рядом, как разведчик в шифровку, втискивал в крохотные окопы граф как бы ничего не значащие цифры, уже заранее зная, что и третий бланк губит задарма.

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

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

Нет комментариев

,

Еще раз о куаркодах

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

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

qr_zaradiye1

Самое бессмысленное здание в мире.

qr_zaradiye2

Сканируешь как дурак коды, а там везде варенье.

qr_zaradiye3

Даже удивительно как кому-то пришло в голову это сделать.

2 комментария

, , ,