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

Бюро

Преувеличенная ценность полей

Книжный канон Чихольда утверждает ценность воздуха на полях. Бюрошная традиция верстки переносит этот принцип в веб: на окно браузера и модули.

golden_section_page_tschichold
Книжный канон Чихольда и бюрошный принцип якорных объектов

Артем Горбунов пишет:

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

Одинаковые вертикальные и горизонтальные поля — признак слабой, любительской, невнимательной вёрстки. Источник

Это несовременный взгляд в мире, где книга выглядит так:
ibooks_iphone_5_hero

Заголовок не имеет отступа справа и ничего — катастрофы не случилось!
harrygassel
harrygassel.info

Заполнять собой пространство — естественное поведение текста:
bubeundkoenig
bubeundkoenig.de

С выключкой текста, что условным хорошим вкусом клеймится как смертный грех:
tomcavill
tomcavill.com

С никак необозначенными переносами слов, что клеймится еще большим грехом и пожизненным позором:
lunchtype
lunchtype.com

Или даже так:
178626987
178.62.69.87

По журнальному боевито:
hassanrahim
hassanrahim.com

Плакатно, в духе афиш музыкальных фестивалей. Здесь труднее всего представить уместность книжного канона и якорных объектов:
listenand
listenand.watch

В виде списка:
soldout
sold-out.ch

И списка с картинками:
gabeferreira
places.gabeferreira.com

Вся ширина экрана, крупный текст, экономность, выразительность, разнообразность — да!

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

, , ,

Чему стоит поучится у Гугла: поиск авиабилетов

1. Пункт назначения и отправления человеческим языком
Интерфейс поисковиков оперирует кодами аэропортов. С точки зрения интерфейса, я лечу в SVO (код аэропорта Шереметьево). Но в одном городе бывает много аэропортов (Домодедово, Шереметьево и Внуково в Москве), поэтому есть отдельный код города (Москва — это MOW). Эта агрегация помогает быстрее найти рейс: достаточно указать Москву и я буду искать во всех трех аэропортах. Гугл пошел дальше. Он агрегирует аэропорты на всех уровнях: город, область, страна, континент.

А вот автобусные кампании еще толком не научились агрегировать остановки. На сайте перевозчика Люксэкспресс предлагают выбрать одну из восьми остановок. Откуда я знаю!
luxeexpress
Я был вынужден просмотреть по порядку все варианты, чтобы найти нужный автобус

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

Ты ничтожный болван! Это же BIA, CLY, AJA и FSC, глупое создание!

Гугл все поймет:

И даже так:

2. Отображение на карте
google_flight_map
Самый естественный формат визуализации перелетов. Карта наглядна и информационно насыщенна.

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

Карта поможет найти более выгодные билеты в окрестностях моего пункта назначения:
google_flight_map
Как-то дорого в Касабланку. Лучше прилететь в Марракеш, а оттуда в Касабланку на автобусе

3. Показ результатов поиска без заполнения формы
В Бюро этот принцип называется «сначала данные, потом фильтры».

Чтобы найти авиабилет, поисковику надо скормить параметры:

  1. аэропорт отправления,
  2. аэропорт прибытия,
  3. дата,
  4. количество пассажиров,
  5. класс (эконом, бизнес и т.д.).

Все кроме пункта назначения поисковики научились заполнять по дефолту:

  1. аэропорт отправления: определяет город по айпишнику и выбирает все аэропорты в этом городе
  2. аэропорт прибытия,
  3. дата: через две недели,
  4. количество пассажиров: один,
  5. класс (эконом, бизнес и т.д.): эконом.

Гуглу необязательно скармливать аэропорт прибытия, потому что он все покажет на карте.

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

, , , , , ,

Вторая ступень школы бюро Горбунова

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

Некоторые работы
Верстка якорных объектов на странице. Нужно было придумать и сверстать страницу о себе. Разместить все объекты в нужные места.

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

Верстка сложного документа (осторожно, большой файл). Проверка знаний на верстку текста — заголовки, отступы, списки, интерлиньяж, висячие предлоги и все такое прочее.

Проектирование сервиса, который хранит документы. Сервис помогает людям хранить и искать данные своих документов — паспорта, ИНН, страховки и других.

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

Про то, как было на первой ступени.

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

, , ,

Первая ступень школы Бюро Горбунова

Перед новым годом закончилась первая ступень школы.

В школе 6 дисциплин. Все кроме типографики и верстки — видеозаписи бюрошных курсов, распиленные на мелкие темы. Видеозаписи дублируются текстовым подстрочником. Знания проверяются тестами (чаще) и практическими заданиями (реже). Некоторые из заданий: вычистить текст от стоп-слов, составить план роста, сверстать таблицу, написать текст для продающего сайта, спроектировать сайт. Учебный процесс проходил в Гугл документах. Каждую неделю в закрытую группу Гугл+ загружалась дозированная порция материала для самостоятельного изучения.

Типографика и верстка
Собирая макет, задаешься десятками вопросов — какие форматы лучше использовать, куда поставить кнопку, как чередовать список товарных единиц и все тому подобное. Собрать качественный макет трудно. Нужно задать шаблоны, предусмотреть масштабируемость — сделать так, чтобы ничего не развалилось при изменении контента страницы. Прочитанные классические книги (Чихольд, Брокман) в этом не помогут — они о бумажном формате. Выручает собственный и чужой опыт. Поэтому дизайнерам полезно собирать коллекции примеров и классифицировать их.

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

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

Хочется больше и глубже в сторону проектирования крупных интерфейсных систем.

Переговоры и отношения
Джим Кэмп по опыту Бюро.

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

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

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

Открытие: в юридической документации допустим информационный стиль текста (со своими оговорками). Чтобы сделать договор понятным даже неспециалисту, составитель вычищает текст от канцеляризмов, копипасты и бесполезной информации.

Впереди вторая ступень.

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

Школа стажеров Бюро Горбунова

Поступил в школу Бюро Горбунова. По коллективной оценке бюрошников, моя вступительная работа заняла 14-е место из 100.

Вступительное задание звучало следующим образом:
«Спроектируйте страницу записи на приём к доктору в крупной универсальной клинике. Пациент должен попасть к нужному специалисту, не разбираясь в медицине — у него заболел живот или беспокоят кошмары. Кто-то идёт к знакомому врачу. Удобное для пациента время может быть занято.
Результат будет оцениваться по простоте, удобству пациента и реалистичности. Смелость сценария приветствуется, но не стоит наделять сайт интеллектом доктора Хауса и ставить диагноз. Оцениваем интерфейс, а не знание медицины: анализ предмета улучшит оценку, но „медицинские“ огрехи простительны».

Мое вступительное задание

Уже задним числом я сообразил, где допустил ошибку. Нужно было докопаться до формулировки, связаться с бюрошниками и уточнить исходные данные. Зачем клинике понадобилась форма? Может и не нужна вовсе — достаточно телефона? Может нужно снять нагрузку с регистратуры путем переноса процесса записи на пациента. Или с терапевтов, о чем намекает исходное задание (оттого, мне кажется, появились фантастические интерфейсы самодиагностики). Возможно, анализ метрик на странице записи показал блокирующие для пользователя факторы — достаточно их убрать. Не пришло в голову заняться этим, мол — это же условность, сугубо для проверки навыков.

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

, , ,