Бизнес-линч


Артемий Лебедев

Монотонную бизнесовую скукотищу никто не хочет читать. Делайте бодро и жив

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

Винегрет из стереотипов — первейший признак того, что делали одноклеточные мудаки.

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

Лучше сделать что-то свое, пусть и хуевое, чем спиздить охуенное, но чужое.

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

Начнем с того, что сайт сделан на «Сильверлайте», который ни один нормальный человека ради сайта ставить не будет

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

Место слева — святое, нехуй лезть туда со своими отступами, наполненными ненужной информацией.

Синий цвет текста должен быть зарезервирован за ссылками. Если ссылки синие, то заголовки не могут быть синими, если они не ссылки.

Если заказчик считает, что на главной странице нужна фотография ресторана, то она нужна

Набор флагом влево не читается. Его просто нельзя использовать в подобных случаях.

Сидя в Екатеринбурге, не надо заводить себе адрес *.co.uk, потому что ты тут же растворишься в бездонной пропасти других «английских» дизайнеров.

Два раза рассказывать о том, чем занимается компания — перебор.

Ссылки «подробнее» придумали программисты-имбецилы. Живому человеку достаточно нажать на подчеркнутый заголовок, чтобы прочитать материал, кретину нужно приписать слово «подробнее» к каждому заголовку

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

Гауссова размывка НЕ делает тень

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

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

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

УВАЖАЕМЫЕ ДРУЗЬЯ (Обязательно: запятая или восклицательный знак)

Явные проблемы со вложенными кавычками. Надо так: ОАО «Хлебокомбинат „Пролетарец“».

Вы пишут с маленькой

Элементы с одинаковой функциональностью должны выглядеть одинаково.

Ссылка не может дублироваться кнопкой, а кнопка — ссылкой. Запомните это

А что делает кнопка «главная» на главной?

Людвиг Быстроновский

Лучше вообще поменьше мусора в шапке делать.

Осмысленные большие фотки — это хорошо. Мелкие превьюшки — плохо. Простыни — хорошо. Клик-клик-стрелочные интерфейсы — плохо.

Люди домотают до конца страницы, если им интересно. Не ссыте вываливать большие картинки, ребята.

Очевидно, «Вход с паролем» лучше передает суть. А еще лучше — придумать интерфейс вообще без регистрации.

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

«Уважаемые Мамы и Папы!», BABYBOOM (3 раза) бережет Ваше время для самого главного». Да ебись оно конем, что вы предлагаете-то? Без въедливого прочтения непонятно (Еще родителей волнуют несколько вопросов (про гигиену, например), и это точно не главная, не войти, не кабинет, не корзина, не оформить, не акции, не категории, не производители, не условия проката, не оформление заказа, не договор аренды с клиентами, не наши контакты и не карта сайта)

Простое и понятное лучше сложного и навороченного

На сайте c объявлениями должна быть как минимум возможность сделать все то же, что можно сделать фломиком в газете: отметить объявление, написать «занято, перезвонить в семь», или, например, «Злобный мудак» и перечеркнуть текст вообще.

Сплэш-экран — решение, которое устарело 10 лет назад.

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

«Контакты» — в русскоязычном интернете это называется «Контактная информация»

Цитирование бизнес-маркетинг-гуру полный колхоз и пиздец

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

Если нет худ. замысла, то лучше скроллить вниз, так человеку привычнее.

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

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

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

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

Дизайн интернет-магазина — это не когда «красиво», а когда заказывать удобно, покупки получать удобно и бабки в итоге текут рекой.

Нормальные сайты не корчат из себя айтюнс и не играют музыку. И еще упомянем нерезиновый дизайн. И коленки невкусные внутри.

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

Илья Михайлов

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

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

Олег Пащенко

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

Вместо Информация лучше написать «Общая информация»

http://dontclick.it/ Когда бескликовых сайтов станет больше 25% из числа всех сайтов вообще — тогда можно будет говорить о какой-то целесообразности. А пока это всего лишь  т. н. «шутка гения»

Активное состояние должно быть выделено, даже если из текста и так видно, что он украинский. Выделять активный раздел или активное состояние — это стандарт, этикет, хороший тон

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

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

На кнопке должен быть глагол («найти», например), а не «Поиск»

Рома Воронежский

1.Унылое однообразие рунета. Заголовок, текст, заголовок, текст, заголовок, текст. И каменты эти вечные, каменты, каменты. И опросы — вот чего не могу понять, так это опросы. Опросы, опросы, опросы.2. Понравилось http://www.artlebedev.ru/kovodstvo/business-lynch/2008/01/31/

3. Сделали сайт? Сняли рекламный ролик? Собираетесь отдохнуть с друзьями? Все еще кипятите белье? Все еще гладите брюки утюгом? Проголодался? Боитесь повествовательных предложений? Альпинист умер, проводник в коме, а восхождение еще не началось? Нескончаемый поток идиотских вопросов льется на тебя из телевизора, журналов и интернета? Уподобляешься беспомощным копирайтерам сетевых агентств полного цикла, что не могут придумать ничего кроме как тупо переспрашивать зрителя? Прекрати. Сникерсни эту привычку.4. Вырежи и получи. Пришли и выиграй. Упади и отожмись. Отними и подели. Проглоти и закашляйся. Подпрыгни и мяукни. Воспари и восторжествуй. Позавтракай и поужинай. Мир сошел с ума, мир сошел с ума.

5. А сайтов с центральной колонкой и двумя по бокам — миллионы. Мне уже кажется, что это индустриальный стандарт. Берем три колонки, и неважно, о чем сайт

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

7. Очевидное и очень простое: убрать нахуй восклицательный знак с кнопки. «Найти!» — нервный выкрик неуверенного

Анна Клейменова

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

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

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



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

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

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

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

Не так важно, зеленая шапка у сайта или серая. Гораздо большее значение имеет общая осмысленность содержимого сайта. Предлагаю придумать несколько простых задач, которыми может руководствоваться потенциальный покупатель (например, «купить книжную полку 100×160 в Казани») и посчитать, сколько переходов по сайту он должен сделать для достижения своей цели. И на каком шаге его терпение иссякнет и он уйдет на другой мебельный сайт, где вместо объяснений, что дарит мягкая мебель, ему сразу покажут внятный каталог.



Подсвечивать поиск при установке курсора в поле ввода

Поддерживать выбранные на главной цвета плашек внутри разделов. Так создастся полезное цветовое зонирование.

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

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

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

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

Если просто взять и написать текст под изображениями:

Людям будет удобнее читать

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

Можно сэкономить на оптимизаторах

У дизайнера будет больше времени для полезных задач

Оперативно обновить цену на сайте сможет даже менеджер

по продажам.

Исчезнет эффект «плитки»

Сайт будет быстрее загружаться.

И лучше масштабироваться!

Предложение можно будет скопировать и отправить почтой

перевести автопереводчиком.

Текстовые ссылки вызовут больше доверия.

Восприятие информации улучшится.

А стиль сайта станет более лаконичным и сдержанным.

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

Про каждый новый смысловой блок спрашивайте себя: зачем он здесь?

Вячеслав Кутеев

Скобки и подчеркивание в телефоне лишние

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

Хороший анонс http://www.artlebedev.ru/kovodstvo/business-lynch/2012/08/16/

Адаптивный веб-дизайн http://www.awwwards.com/50-examples-of-responsive-web-design.html

Сергей Кулинкович

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

Длинные страницы с человеческим текстом и нормальными фотографиями — почти всегда беспроигрышный вариант.

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

Расстояние между абзацами следует делать больше расстояния от заголовка до последующего текста.

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

Принципы правильной навигации http://www.artlebedev.ru/tools/technogrette/etc/navigation-rules/

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

Часто возникает ситуация, когда все замирает на несколько секунд после нажатия на ссылку. Сообщение «Загрузка…» или спиннер могли бы исправить эту проблему

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

Каталог частных объявлений без привязки к населенному пункту практически бесполезен. Крупнейший сайт с объявлениями craigslist.com, например, встречает новых посетителей страницей со списком городов.

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

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

Две различные по смыслу группы ссылок никак не различаются по оформлению. Копирайт и второстепенные ссылки в подвале выглядят так же, как и основное меню. Не гуд

Как должна вести себя ссылка при наведении http://habrahabr.ru/post/16435/

Бесплатный типограф http://www.artlebedev.ru/tools/typograf/

Заголовкам не нужны двоеточия.

Подвертите пароль… Можно сформулировать понятнее, например «Пароль еще раз». 10 правил хорошей формы http://www.artlebedev.ru/tools/technogrette/etc/forms/

И еще…

Писать бледненьким по бледненькому — западло

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

Не надо на веб переносить книжные приемы. На бумаге выравнивание по сторонам помогает глазу не отвлекаться, при этом у вас есть инструменты воздействия на набор: переносы, разрядка, масштаб шрифта, настройка минимальных и максимальных пробелов и пр. На вебе у вас таких инструментов нет, вот и не надо формализма. Align=«left» нормально работает.

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

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

Пятизначные числа надо разбивать половинным пробелом, по три цифры с конца. Так их легче воспринимать.






Предыдущий:

Следующий: