Технологии упрощаются: раньше для создания сайта требовалась команда программистов, сейчас — собственные знания и навыки. Фронтенд и бэкенд оставим профессиональным разработчикам, для обычных пользователей придумали конструкторы. Они предлагают широкие возможности, сопоставимые с самописными сайтами, и простой интерфейс, как у ресурсов на CMS (Content management system).

Видео-курс по Tilda

Мы совместно с командой платформы Tilda запускаем видео-курс по созданию сайтов. За 16 уроков слушатели познакомятся с техническими настройками и функциональными возможностями конструктора, чтобы научиться запускать продвинутые web-ресурсы.

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

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

Программа курса

Слушатели изучают теорию с помощью видеолекций и методический материалов. Теория закрепляется на практике через домашние задания. Обучение разработано по системе микроленинга — короткие уроки по 10 минут и простые задания. Это помогает быстро учиться и не терять мотивацию. За время учебы вы создадите четыре сайта, пройдя полный цикл: прототип — сайт — контент.

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

В течение курса вы изучите темы:

• обзор конструктора;
• предварительное исследование перед созданием сайта;
• предконцепция;
• прототипирование;
• текстовый и визуальный контент;
• типографика и композиция;
• колористика и модульные сетки;
• функциональные возможности — формы, интернет-магазин, seo;
• анимация;
• zero-блоки;
• верстка;
• метрики и тестирование.

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

Почему Тильда

Tilda — конструктор сайтов, который был создан в 2014 году компанией FunkyPunky. Он сочетает в себе продвинутые возможности и простой интерфейс разработчика. На платформе есть готовые шаблоны, которые можно сразу использовать в работе.Однако это будут примитивные лендинги с типовой структурой.

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

Для интерактивности Тильда предлагает использовать анимацию. Вы сможете продумывать сценарий: когда и что будет открываться и выезжать, как будет прокручиваться страница. Сможете внедрить функции animation, parallax и fixing. Это даст эффект параллакс при скроллинге, фиксацию меню, футера или другого элемента и разное появление блоков.

Сайт на Тильде — это не просто страничка в интернете с доменом третьего уровня. Вы сможете подключить собственный домен, добавить форму оплаты, проводить А/В-тестирование. Сайты корректно работают на всех мобильных устройствах благодаря встроенному адаптивному дизайну. Есть seo-продвижение: вы самостоятельно прописываете ключевые слова и оптимизируете ресурс под поисковики.

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

Запись на курс

Курс начинается 24 сентября. Чтобы записаться на курс, оставьте заявку или позвоните по телефону 8-800-700-68-41. Запись закрывается в воскресенье 23 сентября. Если у вас остались вопросы, задавайте их по телефону или в комментариях.

Дизайн-система — термин, который в моде и у всех UI-дизайнеров на устах. Чтобы разобраться, что это и зачем, я перевела обзор полезных материалах по дизайн-системам. Автор — Ведран Арнаутович (Vedran Arnautovic) — ведущий продуктовый дизайнер в Zendesk. Оригинал здесь: «Design System Resources».

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

Этот контент повлиял на мое понимание темы и на то, как мы с коллегами из Zendesk работаем над собственной системой Garden.

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

Видео

«Дизайн-системы. Когда и сколько?»

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

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

Дизайн-системы в Zendesk

Дизайн-системы способствуют распространению принципов доступности. На 17-й минуте 35-й секунде мой коллега Остин Грин (Austin Green) начинает говорить о проектировании в рамках нашей дизайн-системы. Это моя любимая часть доклада, потому что Остин объясняет, как мы встраиваем средства обеспечения доступности (accessibility) в каждый компонент системы. Объяснение хорошо тем, что доступно (улавливаете?) даже неспециалистам в разработке и проектировании.

Устойчивые дизайн-системы

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

Статьи

Design Systems Handbook («Руководство по дизайн-системам»)

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

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

Прочтите, если…

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

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

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

Why design systems fail («Почему дизайн-системы не достигают цели»)

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

Прочтите, если…

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

Your sketch library is not a design system («Ваша скетч-библиотека — еще не дизайн-система»)

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

Прочтите, если…

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

People over pixels («Люди за пикселями»)

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

Прочтите, если…

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

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

The most exciting design systems are boring («Лучшие дизайн-системы скучны»)

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

Прочтите, если…

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

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

AirBnB: Building a visual language ( «AirBnB: создание визуального языка»)

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

Прочтите, если…

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

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

Designing design systems for complex products («Создание дизайн-систем для сложных продуктов»)

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

Прочтите, если…

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

Animation in design systems («Анимация в дизайн-системах»)

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

Прочтите, если…

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

Atomic Design («Атомарный дизайн»)

Прочтите, если…

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

Atomic design: how to design systems of components («Атомарный дизайн: как создать систему компонентов»)

Прочтите, если…

...вам интересно, как один дизайнер реализовал «атомарный дизайн» на практике.

А какие материалы по дизайн-системам нравятся вам?

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

За 8,5 лет мы накопили огромный опыт обучения далёких от программирования людей крутой IT-профессии. Мы идем дальше и перезапускаем обучение дизайну.

Мы сделали самый полный курс по веб-дизайну для тех, кто хочет освоить профессию с нуля, создать мощное портфолио с реальными проектами и получить оплачиваемую стажировку в Mail.Ru Group.

Первый поток уже набран и стартует 25 сентября. Открыта запись на 29 октября; вот что ждёт студентов:

Для кого

Программа подойдет:

• Новичкам. Курс даст необходимые знания и навыки, сформирует видение и поможет собрать портфолио. После успешного завершения курса вы сможете работать дизайнером.
• Дизайнерам. Веб — передовая сфера, где определяются и утверждаются тренды. Поэтому даже те дизайнеры, чья работа не связана непосредственно с «паутиной», вынуждены осваивать новое для себя направление веб-дизайна.
• Менеджерам проектов и тем, кто так или иначе отвечает за запуск сайтов и приложений. На курсе вы узнаете, сколько сотрудникам требуется времени на задачу, оцените уровень их компетенций, узнаете, когда задержки вызваны объективными причинами, а когда — ленью. Кроме того, после вы всегда сможете вставить свои 5 копеек. Объективно.

Как проходит обучение

Обучение длится 8 месяцев, но не думайте, что это слишком долго. Предстоит сделать многое:

• Настроиться на правильный лад. Вы узнаете, что такое веб-дизайн, в чём особенности профессии и как стать в ней успешным.
• Научиться работать с софтом. Главные инструменты: Adobe Illustrator, Adobe Photoshop, Figma.
• Научиться работать с графикой. Как использовать цвета, шрифты, иконки и изображения так, чтобы это решало задачи проекта.
• Познакомиться с UX и UI. Вы поймете разницу между мобильным и веб-дизайном, обучитесь правильным методам работы в команде.
• Освоить базовые знания вёрстки. Вы узнаете, что нужно учитывать на этапе проектирования и идей для успешной технической реализации.
• Создать пять проектов для портфолио. Плюс выпускная работа на основе реального брифа — с презентацией решения, фидбеком, победителями и наградами.

Кстати, награда за лучший выпускной проект — оплачиваемая стажировка в Mail.Ru Group. Отличный старт для карьеры!

Что дают курсы

Помимо профессиональных навыков, у вас останется ещё кое-что:

• Отличное портфолио. Его вы будете качественно наполнять весь курс обучения.
• Сертификат. Очевидное подтверждение уровня ваших знаний.
• Связи. Расширится сеть контактов за счет одногруппников, преподавателей, экспертов и организаторов стажировки.
• Экспертные рецензии. Эксперты оценят качество ваших работ и подскажут, куда расти дальше.

А вот что об этом говорит куратор курса, арт-директор дизайн-студии Mail.Ru Group Артем Фенелонов:

Видео:

Что будет после

По всей России открыто более 1000 вакансий на позицию веб-дизайнера со средней зарплатой 80 тысяч рублей. Так что ваша задача сведётся лишь к поддержанию себя в хорошей дизайнерской форме и выбору наиболее приемлемых позиций.

Но до это момента ещё 8 месяцев трудного, но интересного обучения. Мы начинаем совсем скоро. Вы с нами?

1. Как стать уверенным в своей креативности

Дэвид Келли, основатель легендарной международной компании IDEO, 40 лет занимается дизайном компьютерной техники, IT-продуктов и не только. В 1979 году его клиентом был Стив Джобс — тогда еще мало кому известный. Келли считает, что люди не делятся на рациональных и творческих. Человек зачастую не выдвигает смелых идей не из-за их отсутствия, а из страха критики и осуждения.

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

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

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

Келли приводит в пример магазин Prada New York. Для него разработали сразу несколько технологий, которые облегчают посетителям выбор и подталкивают к покупкам. Зеркало-дисплей в примерочной может показывать отражение с задержкой — людям удобно рассматривать себя со спины. Келли говорит и о других примерах дизайна «для людей», которые подтверждают, что все гениальное — просто.

3. Как дизайн развивает доверие

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

Спикер рассказывает, как в Airbnb придумали систему отзывов и почему комментарии арендаторов и домовладельцев публикуются одновременно. По словам Геббиа, важно соблюсти баланс при раскрытии информации, выбрав «нужную дозу». Для этого окна для ввода данных на сайте имеют фиксированный размер. Ресурс подсказывает, как написать объявление, чтобы оно вызывало доверие.

Все секреты Airbnb — в видео.

4. Почему в дизайне важен незамыленный глаз

Тони Фаделл, разработчик дизайна iPod и термостатов Nest, заявляет — дизайнеру нельзя «привыкать» к проекту. Когда что-то происходит из раза в раз, перестаешь замечать нюансы. Это ограничивает творческие способности. Именно внимательность к деталям позволяет сделать продукт, удобный для пользователя — и потому востребованный.

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

5. Как делать людей счастливее через дизайн

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

6. Из каких компонентов состоит дизайн, который делает счастливым

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

«Новый я — это красота, — начинает лекцию Норман. — Люди обычно говорят: „То, что говорит Норман, это хорошо. Но если следовать всем его советам, все будет удобным, и при этом уродливым“. Что же, я об этом не думал, так что...».

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

7. Почему проще — не значит лучше

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

Он демонстрирует, какое значение может иметь шрифт, почему в дизайне не всегда стоит идти очевидным путем и все упрощать. Карсон призывает быть смелее и экспериментировать: «Я начал думать о некоторых своих решениях. Например, выборе между шрифтом Serif и San-Serif. По большей части это не представляет опасности для жизни. Почему бы не повеселиться?»

8. Чем грешат дизайнеры интерфейсов

Обозреватель технологий в New York Times и технический корреспондент CBS News Дэвид Поуг делится взглядом на интерфейсы. По его мнению, самое сложное — не решить, какие функции добавить, а определить, что убрать с экрана. Хороший интерфейс должен быть простым, иначе он препятствует развитию технологий.

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

9. Как создается дизайн топовых сайтов

От UX-дизайнера Маргарет Гулд Стюарт вы узнаете, как крошечные изменения во внешнем виде сайтов могут привести в негодование тысячи людей или сделать их жизнь лучше. Эксперт делится секретами, как проектировать интернет-площадки для огромной аудитории. Маргарет Гулд Стюарт работала с Facebook, YouTube, Google. Она рассказывает, что на обновление кнопки «Нравится» в Facebook было потрачено 280 часов рабочего времени, и объясняет, почему оценка на YouTube сменилась с пяти звездочек на «лайк» и «дизлайк».

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

10. Почему простота не означает примитивных решений

Сотрудник MIT Media Lab Джон Маэда отмечает, что людям нравится сложное. «Я задумался о простоте. Что включала бы простота на пляже? А что, если бы небо было на 41% серым? Не было бы оно тогда совершенным небом?», — размышляет он.

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

11. Как технологии влияют на типографику

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

12. Как выглядит книга будущего

Разработчик ПО Майк Матас показывает на iPad первую полностью интерактивную книгу. Это час документальной съемки, интерактивной графики, аудио и карт, сочетающихся с текстом. Само выступление длится меньше — всего 4:34.

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

13. Что ждет интернет

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

14. Как выглядит пользовательский интерфейс будущего

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

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

Тексты на сайте должны быть для людей. С этим согласны и разработчики, и читатели. Но почему-то веб-мастера считают, что это правило относится только к контенту сайта, а про тексты интерфейса забывают. Но для пользователей сайт — единое целое, поэтому они хотят видеть вместо «Текущая сессия приостановлена» и «Internal Server Error» человеческие уведомления, которые помогут в работе. Как сделать сайт более дружелюбным, выясним в этой статье.

Пишите естественно

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

Стоп-слова в интерфейсе. Источник

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

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

Упрощайте интерфейс

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

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

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

Уберите дублирование

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

Объясняйте

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

Можно добавить объясняющие подсказки к каждому полю. Они помогут понять, зачем требуется информация. Например, рядом с полем «ФИО» укажите, что товар передается по паспорту. Тогда пользователь будет сам заинтересован указать верные данные. Объясняющие подсказки можно прописать сразу или показывать их, когда посетитель неправильно заполнил форму.

Примеры объясняющих подсказок. Источник

Успокойте пользователя

Отдельный раздел — ошибки и предупреждения. Их тоже пишут в отделе разработки, поэтому в них много технических терминов и фраз на профессиональном языке. Обычному человеку тяжело понять, что означают сообщения «We are currently unable to check for updates» или «Try notifications for only your most important email». Часто предупреждения просто пугают.

Чтобы помочь посетителю, нужно ответить на вопросы «Что произошло?» и «Что делать дальше?». Если сайт завис, напишите: «На сайте возникла ошибка, перезагрузите браузер». Если файл назван некорректно: «Исправьте имя файла. Оно не может начинаться с цифры или символа». Дополнительно стоит рассказать, почему возникла ошибка, что будет дальше и как этого избежать впоследствии. Так вы успокоите посетителя и подскажете, что делать.

Делайте понятным текст на кнопках

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

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

Шпаргалка

1. Пользователи не разделяют тексты интерфейса и контент на сайте. Для них вся картина выглядит целостно: дружелюбно или нет.
2. Пишите простым человеческим языком. Не используйте в интерфейсах стоп-слова, оставьте их для общения с профессионалами.
3. Не заменяйте спецтермины на синонимы бездумно. Подумайте, зачем эта информация пользователю, и перескажите с его точки зрения.
4. Упрощайте интерфейс, убирайте избыточность. Проектируйте путь пользователя таким образом, чтобы ему пришлось принимать как можно меньше решений.
5. Отойдите от «бабушкиного» интерфейса, особенно если ваша аудитория — продвинутая. Уберите информационный шум в виде поясняющих слов «введите», «нажмите», «выберите» и подобных. Пользователи обычно знают, что нужно делать с чекбоксами, полями и радиокнопками.
6. Объясняйте посетителям, зачем вам данные о них. Так вы избежите негатива и получите нужную информацию.
7. При ошибках и предупреждениях сперва успокойте пользователя. Сразу сообщите, что случилось и как ему действовать дальше. Дополнительно можно рассказать, почему возникла ошибка и как ее избежать в дальнейшем.
8. Уделите внимание кнопкам. Текст на них делайте коротким и понятным. Пишите глаголы в неопределенной форме: купить, заказать. Избегайте эмоций и шуток, чтобы не сбивать с действия.

Статья основана на материалах Максима Ильяхова, размещенных в разделе «Улучшить интерфейс» Советов Главреда.