Николай Яковенко

Старт новой рубрики «Переверстка»

Я подписан на блоги и рассылки нескольких дизайнеров. Любимые:

На днях получил письмо рассылки Дизайн мышления Леши Ревы:

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

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

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

Лекция о туристических походах для новичков пройдёт в культурном центре «Этаж» в четверг, 10 ноября.

Артём Достовалов расскажет все о походах: куда лучше отправиться в первый раз, кого взять с собой, что положить в рюкзак и как избежать форс-мажоров.

Адрес: Культурный центр «Этаж» — ул. Ленина, 71.

Сбор с 18:00. Вход свободный!

Справки по тел. 220—29—42

Леша Рева описал одну из основных функций дизайнера (подписываюсь под каждым словом) и предложил проверить свои силы. Как пройти мимо такого соблазна?

Итак, переверстка.

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

Поэкспериментируем с ним:

Турпоходы для новичков (не подходит, потому что может восприниматься, как реклама тур-бюро)

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

Как подготовиться к походу (рабочий вариант).

Можно заняться макетом.

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

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

Не хватает подробностей и туризма.

Стремаюсь из-за заголовка. Нет меткости — месседж размыт. Меняю заголовок, а заодно увеличиваю его кегль.

Отправляю объявление Леше и спустя пару дней получаю ответ:

Привет, Николай!

Спасибо за работу. Работа хорошая, в верстке шаришь:-)

Чуть моих размышлений.

В видео размышлениях по делу о хреновых полях плаката.

Если вы дочитали до этого момента, то у меня для вас новость — я открываю рубрику «Переверстка». Пришлите мне скрин или ссылку на свое объявление, плакат, лендинг, баннер или другой рекламный носитель на почту hello@nick-yakovenko.ru и я бесплатно по мере своих возможностей постараюсь показать, что можно в нем улучшить в плане текста и верстки.

Секс не продаю...

Но черешню предлагаю.

Теперь, когда завладел вашим вниманием — расскажу историю этого поста.

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

В итоге пришел к гениальному заголовку в инфостиле: «4 принципа редизайна навигации портала». Радовался, как ребенок, что придумал интересное начало записи — втягивает в чтение на раз-два.

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

Пару часов индульгирования привели меня к новому шедевру: «Как сделать удобную навигацию сайта?» В итоге вы читаете запись «Секс не продаю».

На фото девушка с вишней с сайта фур-рф, а пост про 4 принципа проектирования навигации портала

К делу.

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

Сайт, над которым работал — Асиенда.ру, специализированный портал для дачников и садоводов. Тысячи страниц с материалами по растениям и садоводству, примерно столько же посетителей в сутки. Часть посетителей постоянные, часть новые — приходят из поисковиков, рекламы на сторонних сайтах и по рекомендациям.

До редизайна навигация Асиенды выглядела так:

В свернутом виде:

В развернутом виде:

Какие проблемы у данного меню?

1) В свернутом виде занимает много места.

2) Нет доступа ко всем разделам сайта. В раскрытом списке много всего, но на самом деле — это небольшая часть от всех разделов сайта.

3) Хромая логика. Основная пользовательская навигация по сайту строится по тегам. В одном случае, главный пункт меню — корневой тег, в другом дочерний. Для новых посетителей это увеличивает порог входа в постоянные пользователи.

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

Проектирование обновленной версии навигации

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

Принцип 1: продумать логику навигации

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

Принцип 2: учесть привычки постоянных пользователей

У корневого раздела (тега) на Асиенде встречается 5 уровней вложенности. В старой версии навигации добраться до внутренних разделов можно только через дополнительную навигацию в теле страницы. Чтобы обеспечить доступ к как можно большему числу разделов, открыл в навигации все теги вплоть до 3-го уровня вложенности.

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

Принцип 3: обеспечить доступ к как можно большему числу разделов

Осталось подумать о пользователях мобильных устройств. Мобильная версия почти полностью сохранила функциональность десктоп версии. Урезаны только теги третьего уровня.

Принцип 4: дать больше возможностей пользователям мобильных устройств.

UX и UI

Страница с вакансиями по дизайну в сервисе «Мой круг»

Все знают: дизайн — это про решение задачи. Решить задачу клиента — значит понять его боль и предложить адекватное лекарство/решение.

Боль у клиента бывает разная, но практически никогда она не измеряется терминами дизайна: надо открыть новый канал продаж; найти партнера на франшизу; снизить загрузку на менеджеров; привлечь в 1,5 раза больше пользователей при том же рекламном бюджете. И тд и тп.

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

Здравый смысл подсказывает, что задачу по разработке дизайна следует поделить на составляющие:
1. Понимание задачи, аудитории, контекста взаимодействия и предложение решения на уровне смысла (это называют UX — «пользовательский опыт взаимодействия»)
2. Воплощение решения в удобном и привлекательном интерфейсе (это называют UI — «пользовательский интерфейс»).

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

Второе понятие ремесло—техническое. Оно связано с умением верстать, работать с типографикой, цветом, формой и пониманием основ юзабилити.

Всё это вместе (UX и UI) и есть дизайн. Без дополнительных приставок и прочей мишуры. Хороший, работоспособный дизайнер по умолчанию начинает со смысла и завершает стилем.

Почему «не знать» — это нормально

Не знать ответ на какой-то вопрос — нормально. Даже, если этот вопрос касается твоей профессии.

Яна спрашивает в Советах бюро Горбунова:

Я молодой автор на фирме. Там я единственная представительница с журналистским образованием. Бывает, что в процессе работы не могу ответить на поставленный коллегами вопрос (А как перевести это слово? А из какого языка оно пришло?) Человек не может знать всё. Я открыто говорю, что не знаю, но выясню. После чего следуют смешки, мол, четыре года чему тебя в Питере учили…

Как правильно реагировать на подобное, и стоит ли говорить, что ты чего-то не знаешь?

Моё видение:

Яна, ваш подход импонирует. Вы открыто признаёте незнание каких-то вещей и при этом предлагаете найти ответы для себя и собеседника (двойная польза).

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

Соотношение знания и незнания можно описать при помощи круга:

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

Человек, который много знает, понимает, что его знание не полно. Граница с «Незнанием» — это вектор для дальнейшего развития.

Не знать ответ на вопрос — нормально. Думать, что всё знаешь — нет.