9 заметок с тегом

редизайн

Улучшения для футбольных таблиц Антона Иокова

Написал недавно Антон:

Привет! Видел, что тебе понравились таблицы спортивных результатов. Похвала — это здорово, спасибо :) Но ещё полезнее критика. Мы выкатили вторую версию с дрилдауном до результатов матчей: https://replaytable.com/. Будет здорово, если ты укажешь на провалы…

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

Предлагаю

Первое улучшение, которое просится прямо из названия Replay Table — заменить в интерактивной части стрелки с дропдауном на более гуманный ползунок наподобие плеера:

Дальше не совсем понятно, почему те самые результаты матчей, которые добавили позже, вынесли в отдельную вкладку. Ведь проигрыш/победа/ничья характеризуется как раз количеством забитых и пропущенных мячей. Логичнее показать всё вместе, не заставляя пользователя переключаться туда-сюда. И ещё всё-таки неплохо было бы оставить возможность увидеть не только общую сумму, но и дельту — очки за конкретный матч:

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

А уж с механизмом должно получиться вообще прекрасно:

Идея посмотреть на турнир со стороны конкретной команды (третья вкладка) неплоха, но, кажется, не додумана. По-настоящему заиграла бы, если бы так можно было сравнить команду с соперниками:

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

Добиться этого поможет новая концепция: вместо того, чтобы идти как бы «вглубь» команды (переключать вкладку), предлагаю фильтровать таблицу по команде:

Эти улучшения — лишь теория, не знаю, удобно ли будет использовать результат на практике.

P.S. Все, кому нужен мой совет, мнение по вопросу или помощь, пишите на bootook@gmail.com.. Обязательно отвечу.

UPD Теперь можно вживую увидеть, как работают таблицы в новом виде на сайте Антона.

2017   гипотеза   критика   редизайн   таблицы

Владимир набросил. Выпуск 2. Стенд о платной парковке

О рубрике

Исходный вариант в сравнении с вариантом Владимира. Подробности читайте в блоге автора

Мой вариант

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

Верхний блок

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

Способы оплаты

Оформим блок в классической манере: вспомогательные элементы расположим на полях основного текста. Туда отправим QR-код и примеры сообщений. Расставим в блоке знаки препинания и заглавные буквы в начале предложений:

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

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

Исходный вариант в сравнении с моим

О рубрике «Владимир набросил»

2016   владимир набросил   гипотеза   редизайн

Рубрика «Владимир набросил». Выпуск 1

О рубрике

Сегодня поговорим о самом обсуждаемом объекте, перевёрстанном Владимиром, — рекламе Подиум-школы Студии моды Сергея Нагорного в вагонах метро (я видел её только там).

Оригинальный макет

Вариант Владимира. Как он к этому пришёл, читайте в его блоге.

Примерно так эти варианты смотрятся (или смотрелись бы) в типичном окружении рекламы в минском метро

Моя версия

Перед тем как предлагать переделку, ещё раз внимательно рассмотрим оригинал:

  1. Заголовок, обращающий внимание (студия приглашает на обучение в подиум-школе).
  2. Подробности сообщения (приглашает людей определённых возрастов).
  3. Побуждение к действию (телефоны и адрес сайта).
  4. Доказательства качества (известная модель Екатерина Доманькова — выпускница школы).

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

Фото

Начнём с самого удачного по сути, но слабого по исполнению места этой рекламы — героя, имеющего влияние на целевую аудиторию. Здесь это Екатерина Доманькова, модель. Подберём более атмосферное фото (к счастью, в инстаграме Екатерины их очень много). Выбрал то, которое помимо других достоинств ещё и перекликается с оформлением сайта Студии:

Заголовок

Не знаю, к каким графическим приёмам прибегнуть, чтобы стала привлекательной конструкция «Подиум-школа модельного агентства „Студия моды Сергея Нагорного“ приглашает на обучение». Поэтому поменяем формулировку на более ёмкую: «Обучение в подиум-школе». А блок с логотипом, названием и ссылкой на сайт используем как подпись:

Остальное

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

Моя итоговая версия

Так она смотрелась бы в типичной обстановке

О рубрике «Владимир набросил»

Редизайн электронного железнодорожного билета

Редизайн железнодорожного билета вызвал поток вопросов у публики. Возможно ли технически воплотить задуманное? Куда делись водяные знаки, атрибутика БелЖД, текстура бланка и вообще «оформление»? Можно ли так свободно обходиться со штрих-кодами? И так далее. Честно, я не знаю ответов. Поэтому, скажем так, беру пост о билете обратно. Начнём заново. С другим объектом.

Электронный билет. Вещь, не зависящая от принтера, установленного в кассе. Не требует специального бланка для печати. Можно верстать как угодно, с использованием каких угодно шрифтов и цветов. Кроме того, у БелЖД появился недавно, а значит, над ним думали наши современники, и он не обязан соответствовать старым канонам.

Будем переделывать электронный билет. Вот так он выглядит сейчас:



Сначала избавимся от мусорных элементов. Уберём неуместные иконки, линии обводок, странный перевод на английский язык (билет читает один человек, которому нужен только один язык) и абсурдные фразы «Подтверждаю…» и «Я согласен…». Если оставить только нужную пассажиру информацию, получим такое:



А теперь давайте подумаем о полезном действии этого объекта. Как ни странно, для проезда он не нужен. На самом деле у проводника список пассажиров, оплативших поездку через интернет. Чтобы он вас там нашёл, нужен только паспорт. Получается, это скорее не билет, а информационная памятка для пассажира. Полезное действие — ответить на как можно большее количество потенциальных вопросов. Значит, для переделки нам надо не только убрать лишнее, но и добавить то, чего не хватает.

Чтобы потом не возникло проблем, на вопросы пассажира будем отвечать только с помощью общедоступных средств и открытых источников. А значит, сможем ответить не на все :) Но, по крайней мере, можем предложить адреса вокзалов в точках отправления и прибытия, схему поезда с отмеченным местом пассажира и перечень станций на пути. Карты возьмём с Яндекс.Карт, а схему поезда и перечень станций — на сайте БелЖД. На него же ориентируемся в выборе стиля нового оформления.

Получается вот такая памятка:



С вёрсткой здесь не так очевидно, как в случае с обычным билетом: другой формат, больше разноплановых элементов, сложнее скомпоновать. Кроме того, перечитываю «Типографику и вёрстку» Артёма Горбунова, — от всей души пытался соответствовать. Старался соблюсти правила внутреннего и внешнего, модульность, якорные объекты и принцип «от крупного к мелкому» без ущерба для идеи максимальной информационной наполненности. Вкратце было так:



Но вёрстка тут не главная тема. Этим постом я хотел напомнить ещё один принцип редизайна: в основе всегда работа со смыслом объекта. Без этого никуда.

UPD. По совету уважаемых комментаторов из фейсбука добавил в билет прогноз погоды :)

2016   гипотеза   жд   редизайн
Ctrl + ↓ Ранее