Про кнопки
Лирическое отступление. Сейчас очень модно обвешавшись ярлыками DesignOps, DesignThinking, DesignEating, DesignDesign, поверхностно рассуждать о сверхновых подходах в проектировании продуктов, рассказывать как мы разрабатывали супердупер систему, обосрались, ничего нам не помогло и мы в итоге все равно дедовским способом сделали все через жопу, зато заказчик доволен! Мол, сколь много подходов, как же мы раньше без них жили, а, по итогу, это только слова без конкретных примеров и четких практических указаний. В последнее время возникает тенденция — чем больше непонятных слов написать в требованиях к соискателю на /хантерс, тем больше вероятность того, что ваша контора в их глазах будет выглядеть круто, профессионально, и вообще у нас тут методы работы прямиком из гугла, вон Саня вчера только с конференции прилетел. Вообщем нужно обращать внимание на совсем другие, более фундаментальные вещи.
Рассуждая о дизайне, все почему-то забывают про простейшие элементы интерфейсов. О том, каким таким образом что-то выглядит, продается и работает лучше своих конкурентов. Безусловно, глубокий анализ рынка, работа и понимание своего клиента в основном отвечает за успешность продукта, но нечто важное можно найти и на и поверхности. Стоит обращать внимание на детали, как бы банально это не звучало. Поэтому я хочу сделать цикл статей по основным интерактивным элементам используемым в современных интерфейсах, как они должны выглядеть, работать и ощущаться пользователем.
Эволюция кнопок
Для начала скажу, что в любой момент времени существования кнопки были вполне юзабельны, и основные паттерны не изменялись с начала палеолита. Тенденцией к изменению стала общая эволюция внешнего вида приложения с которым этот элемент обязан был гармонировать.
Для поиска примеров я воспользовался сервисом WeyBack Machine, можно конечно было взять для примера и Windows, но новые версии выходили не очень часто, да и у Майкрософта свой особый путь. А благодаря вебу можно отследить не только эволюцию кнопок, как таковых, но и глобальные изменения в дизайн трендах.
Давайте переместимся на 20 лет назад.
96-й год на дворе, вышла первая версия Internet Explorer, разрешения ЭЛТ мониторов, у тех у кого они есть, на уровне грунта, соответственно и кнопки в то время не отличались размерами.
У Майкрософт надо сказать уже в 96-м была стильная кнопка поиска продающего красного цвета
97-й никаких особых изменений в дизайне кнопок, в Yahoo навигация выглядит как кнопки на детском игрушечном телефоне
98-й интернет жив и развивается. На ubl.com используется анимированная кнопка-баннер
99-й Apple обновила сайт. Уже чувствуется минимализм и любовь к стильному черному. Появилось новое меню навигации.
У bloomberg.com в это время навигационные кнопки выглядят интересней, а главное удобней. Сейчас иконки подкрепленные текстом встретишь очень редко — связано с тенденцией к упрощению. На самом деле это хороший прием который позволяет ускорить поиск нужных категорий благодаря изображениям, а текст даст возможность сразу понять пользователю их смысл.
2000-й Приход нового миллениума и повышение скорости интернета, ознаменовало эру внедрения новых вариантов дизайна. Вышло очередное обновление у Apple с каноничным сквеморфным дизайном главного меню.
IBM обновил свои серые камни, переоформив их в классные градиентные кружки
Yahoo изменил стиль иконок
2001-й МТВ обновила сайт добавив нотку изометрии, nice try!
Начинает просыпаться СНГ. Артемий на голом html дизайнит главную страницу Яндекса.
Прорастает белорусский onliner.by
2002-й Амазон начинает приобретать свою привычную форму.
American Airlines вместе с IBM остаются в 90-x
2003-й IMDB подсмотрел фишки у Амазона и сделал свою навигацию табами.
как и Food Network.
2004-й Онлайнер обзавелся своими собственными табами
Игровая индустрия развиватеся очень быстро. Выходит World of Warcraft, открываются тематические сайты, один из них фанатский WoWdb, с неплохим навигационным меню.
Чего не скажешь о Electronic Arts
Между тем на официальном сайте Близзард неплохо стилизованные кнопки есть уже давно.
Ад и содомия творится на официальном сайте WoW, здесь ребята оторвались по полной и стилизовали все.
2005-й IBM начал выходить из спячки
Яндекс приобретает привычный вид
MTV строит космические корабли
2006-й Амазон решил внести коррективы ничего глобально не меняя и добавил своему меню градиента
Яндекс решил помочь пользователям и подсветил кнопку входа приятным зеленым цветом, очень скоро от этого откажутся
У Онлайнера появилась нано кнопка на карточках с товаром.
2007-й На конференции Macworld Expo Стив Джобс показывает новый Internet Phone, который позднее станет флагманом компании. По случаю выхода девайса Apple обновляют сайт.
Меню стало выглядеть более сдержано и утонченно благодаря увеличению расстояний от текста до краев кнопки.
Кнопки получили серый градиент и сильное скругление
2008-й IMDB получает свой привычный формат
Люди в СНГ начали осваивать социальные сети, а Павел основательно освоил дизайн Фейсбука
Youtube похож на Apple 2000 образца
2009-й
Фуд Нетворк обновился, завезли тансперенси и кнопки с эффектом стекла.
Если посмотреть на Амазон, то становится понятно откуда растут ноги
У Фейсбука появляется свой стиль
2010-й У Apple кнопки следуют общему тренду на скругленные края и градиент, так же как и на Onliner, Microsoft, Youtube и т.д.
Pizza Hut что-то знает, через год Apple опять обновит свой сайт, он весь станет “стеклянным”
Vkontakte пристально следит за Фейсбуком
Скорость интернета и разрешения экранов растут, эра сквеморфизма идет к своему закату. Люди научились пользоваться сайтами, они различают элементы интерфейса и хорошо ориентируются в вебе. Интернет стремится к упрощению, расцветает новый плоский дизайн.
Современные тренды
После релиза ios 7 выдержанный простой дизайн кнопок стал нормой, создание сложных эффектов и псевдо 3D уже мовитон.
2014 год. Компания Google переосмыслила UX кнопки и вынесла на всеобщий суд совершенно новый, необычный дизайн, который в первую очередь характеризуется отзывчивостью и опытом использования.
Материал дизайн нравится пользователям, в первую очередь благодаря эффективной обратной связи. Многие разработчики начинаю использовать его в своих проектах.
Требуются решения с яркими цветами. Для этого дизайнеры начинают использовать градиенты и цветные тени, материал и flat соединяются. Больше нет технических ограничений, для формирования положительного пользовательского опыта все больше используется нестандартная анимация.
Основы кнопкостроения
Все кнопки состоят из лейбла и собственно самой кнопки. Иногда сюда добавляется иконка. На восприятие влияет в первую очередь ширина пространства вокруг текста, если его недостаточно, то пользователю будет сложнее идентифицировать этот элемент. Кнопка выражает общий вид системы, поэтому скругления по краям не являются панацеей и вытекают из общего дизайн решения.
Мы можем использовать различные приемы для добавления объёма в рамках проекта, либо наоборот сделать кнопку максимально плоской, все зависит от общей стилистики, но суть не изменится.
Кроме того, важным моментом является фон, на котором располагается кнопка, более темные тона будут лучше смотреться на светлом, понятно, а более светлые (вместе с цветными свечениями) на темном.
Также важен размер кнопки в соотношении с остальным контентом.
Как лучше расположить данную кнопку? Наверное, первый вариант лучше! С другой стороны, пользователь может промахнуться по такой мелкой кнопке. Сложно сказать.
Мне кажется, сюда лучше подойдет теорема Эскобара, а красная кнопка смотрится /зже.
Часто кнопки спорят с другими элементами страницы или другими кнопками, в этом случае стоит правильно расставлять акценты
Призрачные кнопки не лучшее решение, пользователи часто упускают их из виду, при появлении потребности в их использовании сделайте их действительно заметными. Для этого нужен сильный контраст, поэтому располагайте их только на темных или светлых участках.
Не прижимайте элементы друг к другу, добавляйте больше пространства чтобы заострить внимание на элементе.
Красный цвет, как правило, выполняет индикатором отрицательной роли, часто на него вешают команды по удалению или отмене. Выбирайте цвет опираясь на общий стиль, но не забывайте об устоявшихся стереотипах в дизайне элементов интерфейса.
/евые примеры
Отличие хороших кнопок от плохих находится не только на этапе визуального оформления, но также в их содержании и опыте взаимодействия. Есть масса тестов которые показывают наилучшую конверсию в зависимости от того что написано на кнопке. Призыв к действию должен быть понятен и выражен в 1–2 словах типа buy, watch, download, delete и т.д. Как правило кнопки обрамляют контент который объясняет что вы получите при нажатии на эту кнопку, поэтому стоит называть их согласно смысловой нагрузке всего блока.
Кнопка должна выглядеть как кнопка, а не превращаться в непонятную конструкцию.
Анимация и UX кнопок
Есть несколько моментов которые являются основополагающими.
Первым делом нужно показать пользователю что элемент интерактивен. Для этого всегда используются визуальные подсказки, такие как форма, размер и цвета.
Размещение кнопок должно быть обусловлено положениями
остальных элементов интерфейсов, кнопки располагаемые
в ожидаемых пользователем местах облегчают взаимодействие
и помогают ориентироваться в системе.
Благодаря размеру кнопок можно расставлять акценты,
от самых важных целевых действий до второстепенных.
При этом лучше не перебарщивать с количеством кнопок на экране.
Сегодня благодаря компании Google и развитию мобильных приложений анимированные кнопки являются обыденным явлением.
Благодаря анимации взаимодействие становится интуитивно понятным, а опыт более приятным.
Пользователь получает обратную связь при наведении и нажатии. Пользуясь продуктом он получает эстетическое удовольствие, и практическую пользу.
Эта первая статья такого формата, я пока еще в поисках правильной структуры материала. Также можете подписаться на канал в telegram, я репощу свою писанину туда + действительно полезный контент от других авторов.
