Советы Ильи Бирмана

Есть презентация, свёрстанная в редимаге, в которой много красивых анимаций, видео и мокапов. В неё нужно вставить формулу расчёта индекса безопасности. Уйти от формулы, к сожалению, нельзя — как показывает практика, чаще всего задают вопросы именно о методике расчёта. Объяснить формулу здесь подробно не могу — коммерческая тайна. Но в целом N — это некоторые экспертные оценки, S — расчётное значение уровня риска, а 190 — это условная величина, зависящая от объекта, индекс безопасности которого считаем.

Как вписать формулу в презентацию так, чтобы она не выглядела, как из методички по сопромату?

Здравствуйте!

На сайте есть классическая страница «Оплата и доставка». На странице — полотно текста. Вроде информация доступно структурирована и написана простыми словами.

Люди не читают, им не интересно тратить время. Я их понимаю: проще позвонить и задать все вопросы по телефону. Но отвечать на одни и те же вопросы каждому сложно.

Есть ли способ сделать так, чтобы клиент зашёл на страницу «Оплата и доставка» и нашёл все ответы без дополнительных звонков?

Если представить идеальный мир, как бы в нём выглядела страница с информацией об оплате и доставке?

Илья, спасай, что делать?

Здравствуйте!

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

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

Как донести до коллег мысль, что дизайнер это ещё и инженер, а не просто оператор Фигмы или Фотошопа?

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

2. Как выровнять стрелочку по горизонтали? float: right прижимает стрелку к соседней справа колонке и нарушается теория близости. float: left, вроде, более-менее.

Это форма заказа теста на ковид в аэропорту.

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

Как показать на смартфоне, планшете что можно кликнуть по области? Ховера нет на сенсорных устройствах

Какую роль играет слэш на конце урлов на вашем сайте? Например, https://bureau.ru/soviet/20140324/Не тот ли это пример дизайна, когда нужно выкинуть лишнее и писать: https://bureau.ru/about

Добрый день!

Есть приложение по доставке цветов в Москве. На скрине один из этапов чекаута, а именно выбор даты и времени доставки букета. Функционал следующий: можно выбрать день (даты сверху), а в конкретном дне выбрать конкретное время доставки (платно) или большой промежуток (бесплатно). Кроме того, клиент сразу видит стоимость доставки в этот промежуток времени. Если какой-то час или промежуток недоступен (все курьеры заняты), он будет выводиться приглушённым.

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

Есть ощущение, что можно сделать лучше. Буду благодарен за идеи.

Есть интерфейс для отелей, в нём они могут создать рекламную кампанию, которая по расписанию будет выводить на экраны телевизоров в номерах гостей какие-то рекламные предложения (скидка в спа, например).

Есть триггеры, когда выводить рекламный баннер: после заселения (когда гость включит ТВ), за час до чекаута, в день рождения гостя. И есть триггер «Каждый день», по которому вопрос.

На первом скрине показано дефолтное состояние. Можно нажать на плюсик у любого дня недели и выбрать время показа (отели просили гибкий выбор, чтобы можно было в каждом дне сделать своё время).

На втором скрине показано состояние, когда выбран показ баннера, к примеру, во вторник и пятницу, в 14:20 (но время могло быть и разное).

На третьем скрине показан конфликт, который хочется разрешить с вашей помощью: если я выбираю вариант «Каждый день» в определённое время, что должно происходить с остальными контролами дней? В них должно открываться время и проставляться время из контрола «Каждый день»? Или контролы дней должны дизейблиться при выборе какого-то значения в контроле «Каждый день»?

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

Спасибо!

Здравствуйте!

Часто меня просят нарисовать в админку новую страницу с кликабельной таблицей-списком. Столбцов иногда 20, а иногда 2. По разным причинам ширину таблицы менять нельзя.

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

Вы советуете всегда уплотнять таблицы. Относится ли это к кликабельным таблицам (спискам) в админках?

Спасибо!

Привет, бюро! Этот вопрос к Илье Бирману.

Эта карта Лондона была создана Джоном Сноу в 1854 году для отслеживания случаев эпидемии холеры. Случаи смерти выделены черными полосами. Используя эту карту, Сноу и другие ученые проследили вспышку холеры до одного загрязненного водяного насоса, обозначенного черным кружком.

Как бы вы изменили карту и поместили в неё данные в 2020 году?

Обратите внимание, что на оригинальной карте не удалось выделить факт того, что на местной пивоварне (Brewery) никто не погиб, поскольку они не употребляли воду из насоса. Как бы вы изобразили эту информацию на карте?

Насколько оправдан звук в веб-интерфейсах? Например: клик по ссылке, добавление товара в корзину, удаление из корзины и т. д.

Здравствуйте!

Проектирую схему автобусных маршрутов для города Дубно (Ровенская область, Украина). Хотелось бы услышать конструктивную критику по улучшению схемы.

Здравствуйте!

Артемий Лебедев утверждает, что сегодня не нужно идти учиться на дизайнера, так как будущее за нейросетями такими как Николай Иронов. Согласны ли вы с этим? Я сам сейчас изучаю инструмент дизайна (Фигму) и в целом тему юай и юикс. Мне интересна тема интерфейсов. Стоит ли тратить время, учиться и переквалифицироваться в профессию дизайнер интерфейсов?

Спасибо.

Здравствуйте! Помогите улучшить интерфейс заказа.

Проектирую сайт для компании, которая продаёт одноразовую деревянную посуду. Нельзя купить одну вилку, они поставляются комплекте по 10, 16, 24 или 50 штук. Также нельзя купить 5 или 25 комплектов, они укладываются в коробки двух размеров, на палетт или в фуру в определённом количестве. Например, палетт — это 25 коробок, 5760 вилок. Учитывая эти ограничения придумал интерфейс, в котором можно сначала выбрать объём набора, затем выбрать куда эти наборы положить и, в конце, количество коробок, паллетов или фур. Чтобы упростить восприятие, все данные будут меняться на лету, когда пользователь меняет параметры.

Насколько этот интерфейс понятен и как его можно улучшить?

Разбор работ студентов школ бюро летом 2020 года

Привет! Я дизайнер и в последнее время много проектирую интерфейсов на английском. И вот интересно, что делают в английском тексте с «висячими предлогами». Бывают случаи, что в английском варианте, предлог намного длиннее одной буквы (ср. «с» и with). Ко всему прочему, в английском языке помимо самих предлогов есть и артикли (a, the). Что с ними делать?

На чём, на ваш взгляд, нужно делать акцент в больших формах: на данных в полях или на подписях к ним?

Ребята, нужна ваша помощь в небольшой задаче. Есть вот такой документ. Его нужно оформить более удобно и компактно в формате ПДФ.

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

Вся «трасса» гольфа состоит из 18 лунок. Обычно по 3 удара на лунку. Таким образом нужно вывести 18 рядов с 3 блочками как на картинке.На лист формата Letter заказчик хочет вместить данные по 9 лункам — то есть, всего нужно разместить 27 блочков, разбитых на 9 рядов по 3 блочка. Перед каждым рядом нужно писать:
Hole 1 Par: (число) Yards: (число)

В каждом блоке они заполняют все чекбоксы и поля для ввода, как показано на последнем примере.

Всё это нужно максимально компактно и стилистически разместить. Что можно придумать для улучшения подачи информации, в рамках таких требований? Спасибо!

Читаю в вашей книге об интерфейсах объяснение того, когда использовать многоточие в названиях кнопок. И тут у меня возник вопрос: многоточие добавляется только в настольных приложениях, а в вебе и мобильных платформах от этой практики люди отказались? Вы используете это правило при разработке интерфейсов?

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

Добрый день, Илья!

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

Тут, кстати, проскакивала одна похожая, но это просто совпадение.

Делаю схему метро Самары. Как считаете, что надо изменить, а что добавить? Схема предназначена для размещения над дверьми вагонов.

Добрый день!

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

Илья, привет!

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

Илья!

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

1. Что вы бы тут изменили?

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

Здравствуйте!

Хочу узнать мнение редакторов и дизайнеров по поводу зачёркнутого текста. Зачёркнутый текст удобно использовать, когда нужно показать, что элемент в списке уже сделан. Когда ещё уместно использовать зачёркнутый текст? Уместно ли шутить с ним?

Как правильно писать единицы измерения в интерфейсе с табличным представлением информации? Конкретно вопрос: нужно ли ставить точку в сокращённых наименованиях единиц измерения?

Что касается единиц СИ — всё понятно, сокращаем без точек: метр – м, километр – км. А, например, с экономическими единицами столкнулась со спорной ситуацией: рубли — руб. или руб? Тысяч рублей — тыс. руб. или тыс руб или тыс. руб?

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

Каким правилам руководствоваться в данной ситуации? Спасибо.

Здравствуйте!

Подскажите, как лучше сверстать эту таблицу? Пробовал визуализировать как календарь, но это ужасно непонятно. Ширина фиксированная. Буду рад любым предложениям.

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

Добрый день!

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

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

Как вам такая схема? Скоро они будут висеть в трамваях и троллейбусах Ярославля.

На скриншоте интерфейс личного кабинета с действующего сайта читинской компании. Это же пример технозависимости? Как исправить табличку?

Здравствуйте!

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

Добрый день!

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

Вопрос Илье Бирману. Если на одной транспортной схеме указаны несколько равноправных видов транспорта, например метро и электрички или автобусы, трамваи и троллейбусы, то как показать их?

Чтобы человек различал разные виды транспорта, необходимо, чтобы они визуально отличались друг от друга.
За счёт каких приёмов это лучше сделать?

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

Как будет удачнее располагать иконки (new, sale и т. п. ) в карточке товара, при условии того, что они могут располагаться только вертикально?

В чём отличие в проектировании навигации для лесов и парков (например, огромных национальных парков) от проектирования навигации для города. На что обратить внимание, где подводные камни?

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

Добрый день, Илья!

За пару лет сделала схему автобусных маршрутов Тамбова.

В первых версиях схемы каждому маршруту соответствовала одна линия, потом маршруты много раз объединялись, чтобы было проще ориентироваться, но выглядело все равно перегружено. И после долгого перерыва, на свежую голову, я поняла, что большую часть автобусов я никогда не видела в городе. Выяснила по расписанию, что некоторые автобусы ходят 1–2 раза в день: рано утром этими маршрутами едут на работу сотрудники крупных предприятий (например, «Пигмента»), вечером — возвращаются домой. Среди дня ждать эти автобусы нет никакого смысла. По этой логике я перенесла часть маршрутов на отдельный слой «нерегулярные маршруты» и упростила до одной линии, чтобы не вводить пассажиров в заблуждение. Верно ли такое решение или правильнее было сделать как-то по-другому?

Также не могу решить: нужна ли сетка и легенда для поиска нужной остановки? И нужны ли «замазки» сетки (например, под названиями остановок), или это визуальный шум?

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

Илья, привет!

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

Но мы всё равно недовольны тем, как выглядит страница повестки дня по публичным слушаниям. Информации очень много, и всё это превращается в кашу. Основные данные, которые выводятся: район города, тип строения, адрес, тип вопроса, инициатор слушаний, файлы с вложениями и ссылка на постановление.

Подскажи, пожалуйста, что с этим можно сделать?

Добрый день, Илья!

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

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

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

Что помешало повернуть все острова Питера на 30°, и не заставлять людей ломать голову после привычного для них расположения станций? Все остальные графические приёмы при этом можно было бы спокойно сохранить.

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

Как правильно писать текст около «переключателей»? «Включить комментарии» или просто «Комментарии»? И почему?

Верно ли написано у Айфона «Загружать изображения» или надо написать «Загрузка изображений»?

Видел ещё такую настройку «Разрешить сайтам отслеживать местоположение» и там тоже стоял переключатель, как тут надо было написать? Уместен ли тут переключатель?

Добрый день!

Впервые делал дорожный указатель. Прочитал госты и пару советов Бирмана.

Сделал и остался недоволен. Что улучшить и где почитать о дизайне знаков и указателей?

Здравствуйте, Илья!

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

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

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

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

Можно ли назвать это модальностью? И все ошибки, которые я совершаю в первом и втором сценарии — модальными? Если да, то как это можно исправить?

Здравствуй Илья!

Я решил переделать оригинальную схему метро в Торонто, так как существующая не устраивает по многим параметрам. Прошу твоего ревью и совета.

Я постил схему на Реддите в саб-редите Торонто и получил огромное количество фидбека. Основной, конечно, был в том, что станции Иглинтон и Иглинтон Вест, Финч и Финч Вест, и т. д. должны быть на одной горизонтальной соответственно, так как это в реальности находится на одной улице. Я помню, что в своей книге ты писал, что от реальной географической привязки можно и нужно отходить при создании схем метро для лучшей читаемости, но что делать тут, когда в Торонто очень много людей полагаются на наземный транспорт? Многие хотят видеть близкое к географическому расположание станций.

Технически я могу выровнять станции по горизонтали, на такой маленькой схеме не должно это казаться плохо, но что делать с жёлтой веткой на северо-западе? Если я буду пытаться привязать станции по вертикали, то это превратиться в мешанину. Что посоветуете? Как можно улучшить схему?

Спасибо!

О схеме на Медиуме

Увидел экран оплаты Эпл-пея, выглядит всё просто.

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

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

Как транспортные схемы проверяют на айтрекере? Что в них может поменяться после такого теста? Часть 4

Иконка закладки: ленточка или сердечко?

Как транспортные схемы проверяют на айтрекере? Что в них может поменяться после такого теста? Часть 3

В Ай-ОСе 12 Эпл представил «Скрин-тайм», который помогает мониторить твоё времяпрепровождение с Айфоном и ограничивать работу определённых приложений. Есть график, который «что-то» там показывает. Каждый раз приходится врубаться, что показывает мне график, что означают эти цифирки. Как бы ты всё исправил?

Как транспортные схемы проверяют на айтрекере? Что в них может поменяться после такого теста? Часть 2

Добрый день!

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

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

Если взять заголовок «Стрижка» и кнопку «Записаться», то выглядит всё хорошо. Но в парикмахерской делают не только стрижки. Тогда нужно выбрать какое-то более общее существительное в заголовок, но не выходит. И остаётся взять заголовок Записаться, так как он выглядит наиболее понятным.

Получается, не во всех случаях возможен заголовок-существительное? И как, в целом, лучше подбирать те же заголовки к форме?

Как транспортные схемы проверяют на айтрекере? Что в них может поменяться после такого теста?

Помогите оценить дизайн страницы.

Нет ли перевеса в левой части макета, где цена и количество и цена за штуку?

А насколько понятен нижний блок страницы, где слайдеры?

Как бы вы предложили переверстать таблицу, чтобы она стала более понятной?

Как можно улучшить схему проезда?

Здравствуйте! Такой красоты я ещё не видал. Как добиться похожего эффекта? Пробовал накладывать паттерн поверх: то чёрный цвет пропадает, то белый… О попадании в пиксели и речи не идёт.

Вопрос Илье Бирману.

Меня давно терзает один вопрос относительно транспортных схем. У меня четкое ощущение, что если уж и стоит делать схему, полезную людям, то она должна включать в себя все виды общественного транспорта (помимо разве что метро).

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

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

Как по мне имеет смысл два вида схем общественного транспорта:
1. В каждом автобусе, троллейбусе, трамвае должна висеть схема конкретно этого маршрута с ориентирами по местности. Что ты примерно будешь проезжать пока двигаешься по маршруту.
2. Отдельно должна быть схема всего транспорта города. По ней ты уже прокладываешь свой маршрут из точки А в точку Б вне зависимости от вида транспорта. В крупных городах такая схема получится перегруженной, но это уже другой разговор.

Собственно мои вопросы:
1. Имеют ли смысл мои соображения? Какой прикладной смысл в схеме движения отдельных видов транспорта?
2. Были ли прецеденты в истории, когда на одной схеме полноправно были указаны все виды транспорта города?
3. Зачем вообще в наше время делать любые обобщенные схемы (кроме метро), если все уже давно пользуются для составления маршрута приложениями в телефоне? И там это сделать реально гораздо удобнее, нежели по схеме.

Илья, здравствуйте!

Скажите, пожалуйста, как правильно организовать в интерфейсе выбор из четырех действий с разным приоритетом (указан цифрой: чем меньше цифра, тем выше приоритет), сгруппированных попарно по дополнительному условию?

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

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

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

Как избежать этой проблемы?

Илья, привет! Увидел в интернете два графика и попробовал улучшить. Получилось?

Просьба помочь советом, критикой, оценкой. Задача — сделать страницу на которой будет показатели продавца. Заголовки Б, Ш, ОП и т. д. исходят от заказчика: по его мнению, это помогает сохранить скрытность информации от глаз со стороны (Б, а не явно слово «Бонус». Ш, а не явно «Штраф»).

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

Спасибо!

Добрый день!

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

Как лучше тут делать обозначение односторонних участков и остановок? Сейчас на схеме есть несколько способов (уменьшенная толщина, стрелка вместо кружка остановки и стрелочки у названий). Какие способы нужно убрать или добавить?

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

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

Стоит ли делать иконки достопримечательностей? Пробная — кинотеатр Искра в самом центре. Стоит ли иконки подписывать?

Заранее спасибо :-)

Делаю расписание автобусов Златоуст — Челябинск.

Интересно мнение Бирмана «Что плохо и как сделать лучше».

Прочитала у Стива Круга, что в США ещё 20 лет назад вышел закон о доступности веб-контента: в частности, веб-сайты должны быть адаптированы для людей с ограниченными возможностями (например, для слабовидящих).

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

Есть ли подобные законы в России?

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

Здравствуй, Илья!

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

Мне самому схема нравится, но хочу узнать твоё мнение о ней и задать несколько вопросов как знающему человеку. Не слишком ли футуристично смотрится схема? Как можно ещё указать направление движения конкретного маршрута? Можно ли так наклонять текст? Стоит ли добавить значки ж. д. станций?

Илья, поделись советом?

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

На рисунке — часть целой приборной панели (есть много других похожих: как сильно загружен канал, скорость операций ввода-вывода и т. д. ). Какие способы спрогнозировать падение скорости передачи данных существуют ещё?

День добрый!

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

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

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

В каком порядке записываются интервалы отрицательных температур? Сначала идёт более холодная температура, а затем тёплая или наоборот? Температура воздуха −30…−35 °С?
Температура воздуха −35…−30 °С?

Илья, добрый день!

Как вам эта схема?

Что думаете насчёт реализации вашей идеи со стрелками в алфавитном указателе?

Здравствуйте!

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

Добрый день Артём, Илья и уважаемые советчики!

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

Здравствуйте!

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

Но текст выглядит суетливо. Хочется убрать знаки препинания в конце списков, но это уже будет ошибка? Или есть какие-то специальные правила для оформления списков в вебе? Спасибо!

Илья, привет! Читаемая ли получилась схема? Что можно улучшить? Что исправить?

По поводу эмодзи в веб-версии Вотсапа. Мне всё время кажется, что перед смайлом поставлен пробел, он как будто смещён вправо, хотя по пикселям всё ровно.

Интересно ваше мнение.

Бюро!

Это плакат для конференции по физике. Скорее всего, он будет дополнять стенд или презентацию участников. В любом случае, он нужен, чтобы «позалипать» во что-то, пока ходишь по залу или слушаешь выступление. Формат 1 × 1,7 м

Вопросы:
1. Как можно улучшить плакат?
2. В блоке MCNP-5 есть зелёная гистограмма. Высота каждого столбца — сумма двух столбцов поменьше. Как показать сумму нагляднее?

Илья, здравствуйте!

Скажите, пожалуйста, как обрабатывается в интерфейсе множественный выбор из двух опций, когда должна быть выбрана хотя бы одна опция?

Multi-switch кажется наиболее подходящим вариантом с точки зрения юзабилити, однако радиус его применения с точки зрения UI и допустимой длины контента крайне ограничен.

Вопрос Илье Бирману.

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

Допустим ли редизайн знаков пожарной безопасности в рамках фирменного стиля заказчика? В госте исчерпывающего ответа не нашёл

Приветствую, Илья! Таблицу можно как-то ещё улучшить? Сомневаюсь насчёт выравнивания и чёрной линии.

Привет!

Стала ли схема понятнее?

Можно ли избавиться от условных обозначений (вроде и так всё ясно) или это обязаловка? Можно ли использовать логотипы существующих компаний ради навигации? Допустимо ли такое изменение пути как в центре схемы (вместо внутреннего угла сделал внешний). Стоит ли линию 7 опустить, чтобы избавиться от дыры на схеме?

Как продвинуть свою схему на смену новой?

Привет, Илья!

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

Условия

Есть показатели, которые меняются в течение дня. Количество значений зависит от измерений, которые совершает пользователь. В среднем одно—три, но может быть и пятнадцать. Они имеют три состояния: 0—30%, 31—70% и 71—100%. Для енергии 71—100% — хорошо, 31—70% — норма и 0—30% — плохо. Для стресса 71—100% — плохо, 31—70% — норма и 0—30% — хорошо.

Задание

1. Выбрать один из показателей и нарисовать график за день с возможностью перехода к месячному.
2. На графике должно быть понятно в какой зоне находится показатель в конкретное время.

Решение

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

Кажется, что количество энергии и уровень стресса в организме взаимосвязаны: чем меньше енергии, тем выше уровень стресса. Если это так, то пользователю нужно это показать. Возможности проверить гипотезу нет, поэтому я рискнул и совместил графики.

Начал со столбцовой диаграммы и отобразил показатели зеркально. Насыщенность цвета зависит от уровня: чем выше, тем насыщеннее для энергии (оранжевый) и наоборот для стресса (красный) (рис. 1).

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

Вопросы

1. Стоит ли отсупать от задания или сделать, как просят?
2. Как лучше всего показать зависимость одних данных от других?

Возможно ли в современном мире оформить адекватно фасады ТЦ с рекламными вывесками, чтобы это не портило внешний облик улиц?

Ребята, привет!

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

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

В атач почему-то только один пример могу прикрепить. Прикрепляю выделение жирным.

В Екатеринбурге сделали новую схему движения трамваев.

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

Здравствуйте, Илья! Я прошлый раз показывал схему вымышленного метро, и вы её назвали «адским кошмаром». Это была одна из первых схем. И вот я хочу вам представить новую. Как ни странно, она тоже вымышленная. Жду вашего комментария!

Здравствуйте!

Как считаете, какой вариант лучше, когда на мобильной версии сайта мы размещаем «телефон» или кнопку «трубки»? Какой вариант по вашему, больше сподвигнет пользователя позвонить?

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

Каково ваше мнение? Есть ли статистика по данному вопросу?

Очень хотелось бы, чтобы вы ответили, заранее большое спасибо!

Илья, привет!

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

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

А какая польза от редизайна транспортной схемы будет понятная муниципальным чиновникам? Что говорить на презентации дептрансу? «Поможет распределить нагрузку между маршрутами», «повысит привлекательность общественного транспорта»?

Поделись, пожалуйста, какой твой опыт.

Здравствуйте!

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

Так ведь не должно быть? Основная же функция ссылки — показать, что её можно нажать. А так получается, что ссылка выделяет текст, как будто важен сам текст, а не то, что по нему можно кликнуть и куда-то перейти. Другое дело, к примеру, у вас на сайте. Если рассмотреть блок новостей на главной странице, то предложения читаются последовательно, ссылки не бросаются в глаза, но в тоже время прекрасно выполняют свою функцию.

Добрый день. Делаю дипломную работу о навигации в Праге, в т. ч. транспортной. Одна из частей — карта метро. Есть к ней какие-либо нарекания? Спасибо.

Добрый день!

Как поступать с пучками кольцевых маршрутов, которые проходят одними и теми же параллельными улицами, но в хаотичном порядке? На картинке родственные маршруты объединены одним цветом, но их количество всё равно затрудняет восприятие, как можно выкрутиться?

Приветствую коллеги!

Мы хотим сделать лучший интернет-магазин металлопроката в России и СНГ.

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

Вопросы:

1. Как показать на одной странице пять разных цен одного и того-же продукта (в зависимости от количества при покупке и единиц измерения)?

2. Как можно улучшить интерфейс резки?

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

В общем, как завернуть сложный функционал в простой интерфейс, чтобы не ограничивая возможностей пользователя, сделать его удобным, предсказуемым и однозначно понятным?

Добрый день, уважаемое бюро!

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

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

Когда-то Илья Бирман сравнивал старые версии пагинации Яндекса и Бинга. У Бинга было непонятно, куда ведет Next. Сейчас у Яндекса так же. Стало хуже?

Таблица в Ворде. А как она должна выглядеть на сайте?

Что не так с этой схемой?

Привет!

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

Заранее спасибо.

Здравствуйте! Прошу вас оценить мою работу в стиле мосметро. Этот метрополитен вымышленный. Подскажите, что надо исправить?

Илья, к чему бы вы отнесли свитчи в вашей системе синтаксиса элементов интерфейса?

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

Подскажите, есть ли правила для их оформления? Какие части выражений надо выделять курсивом?

Илья, привет!

Дано: таблица для сравнения параметров жилых единиц. Она на двух языках и с дурацкими длинными названиями столбцов, которые пришлось поместить в шапке таблицы вертикально. Стало непонятно, как относительно шапки выравнивать цифры в столбцах.

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

Наверное, много чего ещё можно улучшить. Буду рада совету.

И где же глагол на кнопке?

Почти все схемы, которые я видел — это просто вариации на одну тему. Где-то покрасивее, где-то похуже, но в целом везде углы по 45°, разные цвета линий.

В Нью-Йорке вы показывали, что несколько маршрутов объединены в одну линию. И при этом с географией интересно решено.

А какие ещё принципиально другие решения вы видели?

Часть 4.

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

Почти все схемы, которые я видел — это просто вариации на одну тему. Где-то покрасивее, где-то похуже, но в целом везде углы по 45°, разные цвета линий.

В Нью-Йорке вы показывали, что несколько маршрутов объединены в одну линию. И при этом с географией интересно решено.

А какие ещё принципиально другие решения вы видели?

Часть 3.

Почти все схемы, которые я видел — это просто вариации на одну тему. Где-то покрасивее, где-то похуже, но в целом везде углы по 45°, разные цвета линий.

В Нью-Йорке вы показывали, что несколько маршрутов объединены в одну линию. И при этом с географией интересно решено.

А какие ещё принципиально другие решения вы видели?

Часть 2.

Почти все схемы, которые я видел — это просто вариации на одну тему. Где-то покрасивее, где-то похуже, но в целом везде углы по 45°, разные цвета линий.

В Нью-Йорке вы показывали, что несколько маршрутов объединены в одну линию. И при этом с географией интересно решено.

А какие ещё принципиально другие решения вы видели?

Часть 1.

Вы писали, что у каждой страницы должно быть целевое действие. Но что, если речь о сайте магазина, который не продаёт через интернет? Там нечего купить, нечего заказать, даже подписаться не на что.

Добрый день!

Решила в качестве практики составить схему движения городского транспорта в родном городе Тамбове. На самом начальном этапе возник вопрос: в городе есть несколько "парных" остановок, которые находятся практически напротив друг друга, но называются по-разному. Одна остановка — в центр, другая — из центра. Зачастую через них проходят большие пучки маршрутов, и на ограниченном пространстве схемы такие участки выглядят "мусорно". Как можно обойти эту проблему?

Что вы думаете по поводу таймера обратного отсчета на посадочных страницах (акции, бонусы и т. д.)?

Илья, ну так что с сортировкой маршрутов в пучке?

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

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

У меня вопрос к Илье Бирману по транспортным схемам. Какие есть решения для пучка маршрутов, которые в обратном направлении пропускают одну-две остановки?

Вопрос Илье Бирману.

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

Такой вопрос.

Почему никто в интерфейсах не делает иконки времени, которые показывают то же самое время, которое рядом с этими иконками написано? Что плохого в этом концепте? Лишняя избыточность? Нечёткие линии при углах некратных 90°? Или что? Расскажите.

Пример

Спасибо.

Как выбрать формат для схемы метро? Когда делать горизонтальной, когда вертикальной? Может, надо DIN-пропорции соблюдать или ещё что-то.

В Мак ОC, чтобы работал скроллинг, достаточно навести курсор на окно и покрутить колесо мыши. Это удобно. Но часто бывает так: работаешь с несколькими окнами, нажимаешь ⌘W и закрывается не то окно.

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

Горячие клавиши выделить все (⌘A), закрыть программу (⌘Q), закрыть окно (⌘W) расположены рядом. Это приводит к ошибкам. Если по ошибке выделил все — нестрашно. Случайное закрытие программы или окна раздражает и иногда приводит к потере данных.

Это проблема интерфейса или пользователя? Как разработчик должен относиться к подобным неудобствам пользователя?

Сделал концепт Кемеровского метрополитена. Хоть концепт и немного оторван от реальности (в том плане, что его вряд ли когда-нибудь реализуют), хотелось бы знать, что думаете о работе в целом — и о фирменном стиле метрополитена, и о навигации? Есть ли грубейшие ошибки? Что следует исправить или дожать?

Илья в канале в Телеграме в качестве примера нарушения дизайнерских правил привёл таблицы с чересполосицей. А что не так с чересполосицей?

Про схему маршрутов. Как определить, какая линия над какой должна идти?

Посоветуйте, пожалуйста, пока не сошёл с ума.

Часто бывает, что какая-то из плашек на всю ширину окна браузера (шапка в данном случае), и, например, справа кнопка со своими внутренними отступами, а слева логотип или пункты меню, как в этом случае.

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

Отдельным вопросом идёт случай, когда пункты меню имеют свои внутренние отступы, которые явно видно только при наведении, например (последний пример — рамка при наведении). Тогда без отступа не обойтись, но, опять же, всё встает на места только при наведении на первый пункт, а я на скриншоте навёл на второй — опять шапка «перекошена».

Извините за запутанный текст и спасибо.

На днях пересел за Мак с «ретиной», и не могу разобраться с разрешением в Фотошопе. Делаю скриншот — макеты получаются в два раза больше. Какой ставить Resolution в макетах (72, 96, 144)? Или нужно где-то ещё в настройке Фотошопа что-то сделать, чтобы масштаб был 1:1 и у меня, и на других компах?

Вопрос на тему «Взгляд новичка».

Должно ли быть на каждом экране название мобильного приложения?

В совете о схеме метро вы написали: «Вообще, локальные исключения и „замазки“ — тема отдельного совета», но совета так и не вышло. Расскажите про «замазки».

Расскажите о границах экрана.

1. Когда уместно верстать широко — максимально заполнять пространство информацией, как сделано на сайте Бюро?

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

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

4. Вопрос к Илье Бирману. Почему в своем блоге вы так сильно прибили текст к левому краю? Почему пожалели воздуха? Возможно, это дело вкуса, но мне физически не комфортно такое расстояние для чтения с экрана. Поэтому к вам я попадаю только по ссылкам в школьной программе, а к Максиму Ильяхову хожу как на прогулку. Есть ли здесь связь с предыдущими вопросами?

Добрый день!

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

Сделал схему движения автобусов и троллейбусов для своего города. Получилось довольно запутанно. В основном в этом виновата плохо продуманная транспортная система. Но всё-таки хотелось сделать схему, которой можно пользоваться.

Покритикуйте пожалуйста результат.

Небольшой рассказ о создании схемы

Расскажите, пожалуйста, как правильно в мобильных приложениях ставить ссылки, ведь там не используется подчеркивание? Обычно это либо выделение цветом, либо к «ссылке» прикрепляется пиктограмма стрелки, что указывает на возможность перехода куда-либо. Но одного выделения цветом или пиктограммой мне кажется недостаточным. Или в мобильных приложениях ссылки — это моветон, и перемещение между страницами должно осуществляться только кнопками и через бургер?

В чём сложность создания схемы метро? Почему нельзя это автоматизировать?

Часть третья.

Добрый день, Илья!

Делаю схему метро Новосибирска. Хотел бы услышать ваши комментарии и критику. Крупнее (JPG, 760 КБ)

В чём сложность создания схемы метро? Почему нельзя это автоматизировать?

Часть вторая.

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

В чём сложность создания схемы метро? Почему нельзя это автоматизировать?

Часть первая.

Илья, добрый день!

Сегодня третий день, как я начал учиться дизайну. Чтобы, помимо теории, набить руку и освоиться в Скетче, участвую в Daily UI. Сегодняшнее задание — Credit Card Checkout. Укажите на ошибки, пожалуйста.

Большое спасибо!

Добрый день всем!

Сделал схему метро Самары. Хотел бы услышать критику и понять что не так. Спасибо!

Здравствуйте, Илья

Как вы относитесь к капче? Какие другие методы борьбы со спамом в формах вы знаете? Как должна выглядеть человечная капча?

Илья!

В совете о синтаксисе вкладок вы пишете: «Иногда вкладки встречаются в качестве элемента выбора в форме. Это ошибка: вкладка — элемент навигации, а не выбора». В таких случаях вы предлагаете использовать радиокнопки.

А в совете о теории близости говорится о радиокнопках в «другом их дизайне» (на картинке).

Но в этом дизайне они похожи на вкладки до степени смешения.

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

Здравствуйте!

Во многих книгах по типографике часто можно прочитать, что большие числа (больше 5 цифр) лучше разделять половиной пробела для лучшего визуального восприятия. Например: 50 262 руб.

Вроде и не первый миф в типографике, но больше всего удивляет когда данные мелкие «ошибки» вижу в работах довольно крупных компаний с дизайн отделом (например: Ауди).

Или вместо длинного тире используется дефис (xxx-xxx g/km).

Почему в таких крупных дизайн агентурах допускают такие мелкие ошибки? Или это не ошибки!? :-)

Благодарю за ответ.

Что бы вы изменили в дизайне приложения?

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

Как, с точки зрения синтаксиса элементов интерфейса, подписывать ссылки, иконки, вкладки?

Как, с точки зрения синтаксиса элементов интерфейса, подписывать кнопки?

Как, с точки зрения синтаксиса элементов интерфейса, подписывать кнопки?

Добрый день!

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

Как справиться с большим количеством наложения цвета?

Илья, я студентка первой ступени Школы редакторов. В лекции о синтаксисе элементов интерфейса вы учите нас следовать принципу «Форма — это предложение». Примеры утверждают, что заголовок формы — это подлежащее, а глагол на кнопке — сказуемое.

Но «Сообщение — Отправить», «Задача — Поставить», «Правило — Сохранить» — не подлежащее и сказуемое. Если воспринимать их как члены одного предложения, это сказуемое и дополнение. Отправить (что?) сообщение, поставить (что?) задачу, сохранить (что?) правило. И по смыслу правило не выступает здесь субъектом действия, оно ничего не сохраняет.

Я понимаю, что с момента подготовки курса и примеров вы многое переосмыслили и эти тезисы могли устареть. Будет интересно получить актуальные представления о теме.

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

Хотелось бы услышать комментарии и критику с вашей стороны. Спасибо.

Что такое «синтаксис элементов интерфейса»?

Илья!

Это подложка карты ТЦ для бота в социальных сетях. Пользователь спрашивает маршрут, бот накладывает на подложку отметки и маршруты, потом шлёт пользователю ответным сообщением результат. Однако по картинке трудно ориентироваться, если пользователь только подходит к торговому центру: непонятно с в какой заходить вход. Проблемы две:
1. Картинка завязана с координатами арендаторов. То есть, изменить картинку (размеры, ориентацию, поля) можно, но трудоёмко.
2. Картинка приходит на телефоны и планшеты, соответственно у неё разное разрешение — не получится добавить много элементов. В какой-то момент станет очень мелко.

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

Илья, а зачем в чатах нужен аватар и имя пользователя? Что из этого лишнее с точки зрения интерфейса?

Что такое «синтаксис элементов интерфейса»?

Цвета, размеры иконок, их стилистика, водоем, все волнует. Можно ли, нужно ли использовать чужие приемы в таком количестве, и считаются ли они «велосипедом», которого не нужно изобретать?

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

Работа не закончена. Не приходит ничего в голову лучше, чем челябинские конечные остановки. Схема по концепции И. Бирмана и А. Караваева

Что такое «синтаксис элементов интерфейса»?

Илья, привет!

Расскажи, пожалуйста, о приёмах обозначения парков и рек на схемах.

Илья, сверстал одностраничный плеер для прослушивания украинских онлайн-радиостанций для хипстеров. Как улучшить?

Илья, привет!

Расскажи, пожалуйста, о приёмах обозначения парков и рек на схемах.

Добрый день, бюро!

Это таблица из пока что незавершённой курсовой по технологии производства автомобилей и тракторов.

В колонке ITi показаны поля допусков (в мкм) для номинальных размеров (в мм). Эти поля бывают как с симметричными пределами отклонения (звено А1 и другие, кроме А2), так и с асимметричными, поэтому знаки могут быть «+», «–» и «±», причём их необходимо указывать — нельзя приравнять отсутствие знака к положительному числу — такое правило.

Пробелы между строк поставил неслучайно: звенья А1 и А2 увеличивающие, а А3–А6 — уменьшающие. Звено Аs — зазор. Но это уже не относится к теме вопроса.

Вопрос: как правильно выравнивать знаки?

P.S. написал js13 и h12, для наглядности, т. к., скорее всего, все поля будут js, что будет указано снизу таблицы после звёздочки, и в колонке «квалитет» останутся лишь числа.

На сайтах «Энви», «Мэри Трюфель», «Лавишустринг» каталоги товаров сделаны так, что для выбора товара нужно проскроллить несколько длинных страниц, ведь фильтров для прицельного поиска нет. А на сайте «Биз-цен», наоборот, каталог с фильтром. На основе каких факторов принимать решение — делать удобные фильтры или заставлять посетителей сайта много и упорно листать?

Что нужно знать о стоп-словах в интерфейсе?

Как с помощью пиктограмм отобразить строительные материалы, например цемент, гипс, известь?

Как с помощью пиктограмм отобразить строительные материалы, например цемент, гипс, известь?

Как выбрать между листанием и прокруткой?

Илья, скажите, пожалуйста, почему пеньки у станций Смоленских Филёвской и Арбатско-Покровской линий разного размера? Наверняка есть какой-то сакральный смысл :-)

Как с помощью пиктограмм отобразить строительные материалы, например цемент, гипс, известь?

Как должна работать прокрутка?

(Часть четвёртая)

Как должна работать прокрутка?

(Часть третья)

Как должна работать прокрутка?

(Часть вторая)

Как должна работать прокрутка?

Добрый день!

Разрабатываю карту трамваев Уфы (ПДФ, 1,8 МБ). Покритикуйте, пожалуйста

Как делать листалки?

(Часть вторая)

Как делать листалки?

Расскажите об обратной связи в интерфейсе.

(Часть третья)

Стоит ли использовать в дизайне форм подобное объединение инпутов «впритык», с целью уменьшения визуального шума или это является грубой ошибкой?

Расскажите об обратной связи в интерфейсе.

(Часть вторая)

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

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

(Часть третья)

Расскажите об обратной связи в интерфейсе

(Часть первая)

Вы рассказывали, что добавить полезную информацию — это один из способов повысить информативность. А какие ещё способы есть?

Вы рассказывали, что добавить полезную информацию — это один из способов повысить информативность. А какие ещё способы есть?

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

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

(Часть вторая)

Здравствуйте!

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

P. S. Кстати, любимые скобки в качестве выражения радости или смеха — русская особенность. Вы никогда не увидите в американском сегменте блогинга подобие «Oh my dear)))))». Если на иностранном сайте увидите скобки — перед вами русский)).

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

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

(Часть первая)

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

Много раз слышал о правиле семи элементов: должно быть не более семи пунктов в меню, не более семи кнопок на тулбаре. Объясните, как это применять в реальности. Как быть, если мне нужно больше пунктов? Мне кажется, решение, когда не влезающее прячут за кнопку «Дополнительно» или что-то подобное — костыль. Как сделать, чтобы было удобно?

Часть первая

Добрый день!

Собираю сайт для фотографа.

Хорошо ли заглавная страница сайт объясняет суть своего существования?

Хочется ли связаться с Региной?

Что здесь не работает?

Что нужно добавить?

Спасибо!

Как упростить попадание мышью или пальцем в элементы интерфейса?

Часть четвёртая

Как упростить попадание мышью или пальцем в элементы интерфейса?

Как упростить попадание мышью или пальцем в элементы интерфейса?

Часть вторая

Как упростить попадание мышью или пальцем в элементы интерфейса?

Часть первая

Как теория близости работает в интерфейсе?

Часть вторая

Как теория близости работает в интерфейсе?

Часть первая

Илья, вы рассказали о последовательном волшебстве. А как сделать, чтобы волшебство казалось пользователю последовательным?

Что такое последовательное волшебство?

Как поправить это расписание?

Вот как на языке Аутлука будет «Нет новых писем». Почему в программах появляются такие нечеловеческие сообщения?

Что такое технозависимость?

В своем блоге вы написали про наклейку, что «пиктограмма уродлива, зачем-то состоит из трёх цветов и перечёркнута не в ту сторону».

А как должна быть перечёркнута пиктограмма?

Что такое модальность и почему её принято ругать?

Третья часть

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

Часть пятая

Что такое модальность и почему её принято ругать?

Вторая часть

Что такое модальность и почему её принято ругать?

Первая часть

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

Часть четвёртая

Что дизайнер интерфейса должен знать о привычках?

Часть третья

В школе на двери каждого кабинета висит информация о том, как его проветривать.

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

Раскритикуйте, пожалуйста, как можно жёстче и подскажите, как добавить длительность проветривания кабинета при температуре выше 10 градусов.

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

Часть третья

Что дизайнер интерфейса должен знать о привычках?

Часть вторая

Победил ли я Библиотеку имени Арбатско-Боровицкого сада?

Что дизайнер интерфейса должен знать о привычках?

Часть первая

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

Часть вторая

Задача: нарисовать инфографику про губернаторов Иркутской области. Нужно наглядно сравнить губернаторов: срок полномочий, чем запомнился, откуда пришёл.

Решил использовать таймлайн вместо таблицы. Я пытался разделить на уровни представления информации: карточка, дата, шкала. 1-й блок (45 пикселей — 1 год) и 2-й (120 пикселей — 1 год) блок временной шкалы имеют разный масштаб. Всё ли я учёл в инфографике и сетке?

Илья!

Вот переделал расписание маршрутного такси. Что с ним не так?

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

Часть первая

Что такое интерфейс?

Если дизайн лондонской схемы метро Генри Бека так хорош, то почему нельзя использовать его принципы при создании всех транспортных схем в мире?

Четвёртая часть

Персональная навигация по зданиям

Какие пункты меню на сайте должны быть обязательно, а без каких можно обойтись?

Если дизайн лондонской схемы метро Генри Бека так хорош, то почему нельзя использовать его принципы при создании всех транспортных схем в мире?

Третья часть

Что должно быть на продуктовой странице сайта?

Если дизайн лондонской схемы метро Генри Бека так хорош, то почему нельзя использовать его принципы при создании всех транспортных схем в мире?

Вторая часть

Недавно Эпл встроил интернет-магазин прямо в сайт. Теперь корзина (точнее, «пакет») всегда висит в углу. Как вам?

Если дизайн лондонской схемы метро Генри Бека так хорош, то почему нельзя использовать его принципы при создании всех транспортных схем в мире?

Первая часть

Как сделать, чтобы человек не ушёл с сайта, докрутив страницу до конца?

Как вам новая схема лондонского ночного метро?

Как сайт может повысить доверие посетителя к компании?

Какие отступления от географической реальности допустимы на транспортных схемах? Третья часть

Как сделать интерфейс дружелюбным?

Какие отступления от географической реальности допустимы на транспортных схемах? Вторая часть

Делаем сервис онлайн-бронирования услуг красоты. Как, по вашему, удобно ли пользоваться сервисом? Что можно улучшить? Реальные мастера есть в Кировской области.

Какие отступления от географической реальности допустимы на транспортных схемах? Первая часть

Форма редактирования профиля.

Лишних полей нет, убирать нечего. Как можно её улучшить?

Добрый день!

Попалась на глаза вот такая интерактивная иллюстрация сети ресторанов во Львове. Ввела в ступор. Посоветуйте, пожалуйста, как можно её переработать.

Поможет ли немного исправить ситуацию «прямое обращение»?

Илья, обязательно ли выделять посещённые ссылки, и если да, то почему? Я считаю, что пользователю необязательно подсказывать о старой ссылке, ведь он и так знает, куда он кликал. Есть сомнения. Расскажи своё мнение.

Илья, укажите главные ошибки новой троллейбусной схемы Севастополя

Илья, привет!

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

Спасибо!

В малоэтажном доме застройщик сделал нумерацию квартир «неправильно»

Сначала было два графика. Один отображал ссылки со страниц, другой — ссылки с доменов. Мы решили объединить эти значения в один график. Но обычно страниц ссылается всегда больше. Например 10 млн страниц и 16 тыс. сайтов. Мы решили сделать величины относительными свой оси и разделить цветами. Что думаете о таком решении?

Что вы думаете про иконку лифта?

Что вы думаете о нынче модных «лендингах»?

Решил сделать схему линий метрополитена Санкт-Петербурга до 2025 года. Нашёл в интернете план и решил сразу приступить к отрисовке линий, изредка поглядывая на миланскую схему.

Могу с 90%-й вероятностью угадать, с какой стороны в меня полетят первые камни: сочетание цветов (серая и чёрная линии), два типа линий (красная и жёлтая линии выбиваются из общей массы толщиной и собственными обозначением станций — нонсенс с точки зрения навигационного дизайна и инфографики), невнятное обозначение переходов (путь наименьшего сопротивления), расстояние между станциями и текстовые массивы (например, Пушкинская / Звенигородская или Садовая / Спасская / Сенная площадь). Прокомментируйте, пожалуйста, работу с профессиональной точки зрения.

Если с профессиональной точки зрения всё будет очень плохо, то может хотя бы с точки зрения эстетики балл накинете?

Зачем нужна анимация в интерфейсе? Когда стоит, а когда не стоит её использовать?

Вопрос про дизайн турникетов.

Перед турникетами метро Гонконга выстраиваются очереди. Причина — турникет длинный, около полутора-двух метров, и каждый человек ждёт, пока предыдущий человек полностью выйдет за пределы турникета. Только после этого он прикладывает свой проездной и заходит сам. В итоге каждый пассажир проводит 2-3 секунды в ожидании перед турникетом. Десять человек — и очередь на вход уже полминуты.

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

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

В каких случаях ссылка должна открываться в новом окне или вкладке браузера?

Разбор итогов конкурса «Как улучшить навигацию»: торгово-развлекательный комплекс

Нужен ли пробел после «ул.», «г.» и т. д.? Например, «ул.Ленина» или «ул. Ленина»?

Илья, здравствуйте!

Стояла задача — переверстать табло Курского вокзала. Мне стало интересно, но я пока крайне слаба в работе с информацией и типографикой. Буду благодарна за советы. Какие книги почитать и работы посмотреть, которые касаются работы с информацией?

Спасибо.

Здравствуйте, Илья!

Расскажите про вёрстку больших таблиц.

Как избежать горизонтальной прокрутки при работе с таблицами из 20 колонок?

Разбор итогов конкурса «Как улучшить навигацию»: институт

Здравствуйте!

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

Заранее благодарю.

Какой должен быть идеальный маршрутный указатель для трамвая?

Обновили terasms.ru, что скажете?

Разбор итогов конкурса «Как улучшить навигацию»: библиотека

Как вы относите к ссылке «Главная» в разделе меню?

Когда допустимо менять ориентацию карты с привычной север-юг?

Тафти приводит пример с высотой вулканов. Он говорит о том, что эта таблица содержит два уровня информации. Мы можем наглядно оценить распределение вулканов на макроуровне (как гистограмму) и микроуровне (распределение внутри одной тысячи). Почему числа в строке образуют именно такие ряды? В них прослеживается система, но я не могу понять что она отражает.

Почему не «99999877755533200»? Легенда не поясняет, описание тоже. Что я упускаю?

Разбор итогов конкурса «Как улучшить навигацию»: больницы

Уместен ли такой фильтр в форме?

Какие виды фильтров есть и когда их следует использовать?

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

Что делать со звёздочками и сносками?

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

Разбор итогов конкурса «Как улучшить навигацию»

Итоги конкурса уважаемых советчиков «Как улучшить навигацию».

Как улучшить навигацию?

Приветствую!

Необходимо было сделать интерфейс добавления режима работы.

Можно это сделать проще и понятнее?

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

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

Вот схему питерского метро нарисовал. Вдохновлялся схемами московского метро Бирмана и Лебедева. Хорошо получилось? Что можно улучшить?

Обновили дизайн автомобильного сервиса. На ваш взгляд, стал ли интерфейс более простым и понятным для водителя?

Илья, а подскажете бесплатный шрифт для навигации, кроме Ариала? Мне кажется, ПТ Санс не очень подходит, или всё-таки он тоже хорош?

Здравствуйте! Тренируюсь улучшать таблицы. Нашёл в интернете такую картинку, где бросается в глаза отсутствие цифр в колонках. Как улучшить такую таблицу в угоду удобочитаемости и экономии места? Спасибо.

Здравствуйте, Илья!

Как элегантно решить проблему толстых «жгутов» из маршрутных линий?

В качестве примера взята схема движения общественного транспорта Львова.

Спасибо.

Привет всем!

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

Занимаюсь генеалогией (родословие, поиск предков и т. д.). Как вы себе представляете наиболее удобный способ заказа услуги по поиску предков?

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

Спасибо, c уважением случайный прохожий.

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

Как лучше указывать направления движения поездов?

Добрый день!

Подскажите, как правильно делать шапку у таблицы в данном случае? Было ли решение сделать табличку, верным?

Привет!

Иногда попадаются указатели, где вместо расстояний до какого-то места указывают время. Например, в аэропорту до определённой зоны вылета — «5 минут». Почему так делают? Как это использовать? Все же люди с разной скоростью перемещаются.

Добрый день!

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

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

Как бы вы посоветовали спроектировать такую страницу?

На текущий момент мне кажется, что лучшее решение предлагает Амазон (см. скриншот) — для авторизации и регистрации на первом шаге используется одна форма.

Вопрос в рубрику про навигацию. Есть знак с указанием магазинов в торговом центре: налево, прямо, направо. Список магазинов идёт в столбик. Как упорядочить список, чтобы стрелки считывались наиболее легко?

Здравствуйте!

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

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

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

Но! Анализ метрик после запуска показал, что конверсия снизилась на 38% (с 3,25 до 2,01%). Подскажите, пожалуйста, что я делаю не так? В чём может быть проблема? Понятно, что ещё есть куда улучшить страницу. Но прежде всего: почему она работает хуже изначального варианта?

Нумерация выходов из метро. Как лучше нумеровать: единый стандарт или локальная нумерация в зависимости от географии?

Наткнулась на словосочетание «Отступ в круглую»

Музей Гуггенхайма в Нью-Йорке спроектирован так, чтобы посетители двигались в одном направлении: сначала они поднимаются наверх на лифте, а потом спускаются по пандусу, осматривая экспозицию на самом пандусе и в прилегающих залах. Таким образом, пересекающихся потоков посетителей и связанных с этим навигационных задач в музее гораздо меньше.

В каких ещё случаях, кроме выставок, имеет смысл прибегать к такой организации пространства? Какие в ней есть недостатки? Какая навигация всё же потребуется?

Добрый день! Как вам визитка?

Скажите, в чём проблемы данной схемы метро.

Здравствуйте!

Обновился сайт Чемпионат.ком. Что думаете о новом дизайне турнирной таблицы? Что можно улучшить? Мне кажется, что что-то не так со столбцами — плохо считывается информация о победах и поражениях.

Добрый день! Насколько корректный текст? Как можно делать лучше?

Здравствуй, бюро!

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

Цель: показать посетителю, сколько он сэкономит, используя светодиодное освещение.

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

Буду рад, если вы укажете на различного рода недочеты. Спасибо.

Привет, бюро и советчики!

С рождения живу в одном городе и случайно заметил, что таблички домов в разные. В чём смысл цветового кодирования районов? Кому это полезно? Распространённая практика или редкий случай?

Какой способ выбора дня предпочтительнее и удобнее, и почему?

Максимальное количество дней — 14 (2 недели).

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

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

Было бы неплохо увидеть примеры конкретных решений.

Как быть с литерой «б», которая так и норовит показаться шестёркой?

Как вы относитесь к нумерации станций метро? Дело в том, что мне казалось это совершенно ненужной штукой, люди же не настолько тупые, что название не запомнят (ещё нумерация интересная, но её можно понять).

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

Зачем нужны страницы «О компании» и «Команда».

Про платные парковки.

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

Компания делает лестницы. Ещё у них можно заказать детали для лестницы, а лестницу собрать самостоятельно. Одна из таких деталей — балясина. Это столбик, который поддерживает перила. Для модульных лестниц есть одиннадцать форм балясин. Каждая форма производится в четырёх размерах: 40, 45, 50 и 60 мм. А высота всегда одинаковая — 900 мм.

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

Почему навигацию выделили в новую рубрику? Я был уверен, что в дизайне табличек и указателей действуют такие же принципы инфодизайна, как везде.

Почему вы использовали «Подробнее…» на сайте Связного Банка

Илья, расскажите, что такое «септоиосические цвета». Гугль ничего не ответил.

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

Первая часть. Отчего кегль не совпадает с высотой шрифта в Фотошопе. Например Ариал 12 пк, а высота получается 9 пк всегда. Я не понимаю, почему так происходит — невидимые области? Заплечики или что-то ещё? Некоторые шрифты меньше в высоту, другие больше.

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

Добрый день!

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

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

Спасибо :-)

Скажите, когда стоит использовать на сайтах выпадающее меню? В чем плюсы и минусы его использования?

Привет! Мы — интернет провайдер. У нас есть страничка для создания заявки на подключение пользователя. Мы ей страшно гордимся, но топ-менеджмент считает, что в ней что-то не так… Хочется услышать ваше мнение. Спасибо.

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

Вопрос: можно ли как-то перестроить таблицу без потери смысла и легкости запоминания? Спасибо.

Как работать дизайнером, если практически нету портфолио?

Здравствуйте!

Задача: спроектировать форму опросного листа. Выяснив все нюансы, приняв во внимание все комментарии клиента, я сделал вот такую форму. Можно ли её как-то улучшить/упростить?

Здравствуйте!

У меня вопрос на тему удобства и правильного использования фильтров при поиске товаров.

Как правильно отображать начальное состояние фильтров по производителю с использованием чекбокса? Начальное состояние должно быть «все выбраны» или «не выбрано ни одного»?

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

Спасибо.

Какой из способов передачи макетов верстальщикам вы считаете правильным?
1. Передача макета в ПСД с пояснениями;
2. Подготовка исходников (указание всех шрифтов, размеров, поведения, можно даже основные дивки набросать);
3. Передача верстальщику исходников (в форматах Иллюстратора, Индизайна или Фаерворкса). Я там же описываю поведение элементов макета. А верстальщик готовит для себя материалы сам.

Перед вами редизайн сайта по продаже и доставке цветов.

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

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

Обязательно ли выносить названия цветов рядом с иконками? Или же достаточно всплывающих подсказок? Достаточно ли заметна корзина заказов? Что нужно переделать и что можно улучшить?

Что делать, если заказчик после постановки задачи по проекту предоставляет свои наработки, макеты и прочее? Принимать их в расчёт или нет?

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

Что скажешь о схеме?

Здравствуйте, я начинающий веб-дизайнер. Это одна из моих работ. Не могли бы вы описать её недостатки, ошибки, слабые и сильные стороны, если таковые имеются :-) Заранее большое спасибо.

Как правильно организовать и оформить раздел «где купить» при условии, что есть большой список городов и к ним прилагается список магазинов? Насколько уместен текущий вариант?

Попробовал улучшить табличку с расписанием автобусов. Имеет ли такое решение право на существование? Что можно улучшить? Что-то подсказывает, что с данными здесь не очень удобно работать.

Здравствуйте!

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

Спасибо.

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

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

Здравствуйте!

Подскажите, как с вашей точки зрения удобнее представить время работы некой организации, которая работает в определенный промежуток времени (3 недели) на время проведения турнира? Плюс часть дней рабочий день с 9 до 17, а в некоторых промежутках — с 9 до 21.

Я предложил вместо таблицы (1-й вариант) сделать календарную сетку, где в каждый конкретный день видно время работы (2-й вариант), но мне сказали что оно «не читается». Скажите, кто прав?

Привет! Я учусь на первом курсе политехнической шараги и меня очень огорчила программа по информатике (профильный предмет, ага). В частности, нам посоветовали готовиться по материалам жуткого, уродливого, неграмотного и просто убогого сайта на Народе. Как перфекционист, я не мог с этим смириться, и за один приятный вечер написал пару статей у себя, хотя до этого дела с ХТМЛ не имел. Что можно улучшить? Стоит ли продолжать или я безнадёжен и у меня нет вкуса?

Про многоточия. Уместно ли использовать многоточия в форме поиска «Введите что-нибудь…» или, например, в форме для комментариев «Введите текст комментария…»?

Решил улучшить график результатов победителей олимпийского финала по плаванию на расстояние 200 м. Какие были допущены ошибки? Что ещё можно улучшить и изменить?

Это действительно очень плохая кнопка, или всё не так плохо?