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

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

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

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

1 Гамбургер-меню​


Гамбургер (hamburger) - это название вот такой иконки-кнопки:
proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2Fe93d3fd19cbbbb13c1c9fefbc86fb0c2898fa850.png&hash=c2b39ddf0599bbfa875e4d65e785b282

Три полоски напоминают слои в гамбургере - отсюда и название.
proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F29263bcaae87258ac7c903a9a2f4524778ded9a5.jpeg&hash=04a73dfd9c7679923c569d77d01aa150

При нажатии на нее пользователю отображается меню. Гамбургер-меню используется не только на сайтах, но и во многих приложениях:
proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F74f47c20066bb540beac29a049ac1ea96d493bc0.jpeg&hash=32d68cfe63fdf9a156b5878cf9570925

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



дополнительного



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



скрывает



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

Если в приложениях использование гамбурер-меню еще понятно, что в случае с десктопом от него сейчас решительно отказываются в пользу других решений. Да и говоря про приложения - вот пример, когда Facebook сильно упростил навигацию в своем приложении для iOS, частично избавившись от гамбургер-меню:
proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F9a0bd8ff0250691a15cf654f87521ee43b592ac7.jpeg&hash=1f4623efb3ce6128962ae7c457581da9

По этому принципу можно пойти и на сайте - вместо отдельного меню добавить все нужные вкладки на видное место, например, в верхнюю часть:
proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F1f587d5d8f4fe91e3f2576b6ded09de10efaed62.png&hash=c3543bc83b8ee41743006173abdb71d8

2 Массивное меню​


Продолжая разговор о меню. Меню с множеством пунктов и подпунктов до сих пор не редкость.
proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F9892e0f84cb5563331ad0ed99e2423d083df959e.png&hash=98106b779de37da815a6b81b49e072c7

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

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

Чтобы избежать этой путаницы, разделите товары по категориям (а статьи - по темам). Можно добавить какой-нибудь дополнительный критерий разделения - например, каталог производителей:
proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F5d8962ee3c125fb8d791bd6e8e6b78784fbc12ee.png&hash=9dbcf130a9992385c48d0547671bf629

3 Бесконечный скроллинг​


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

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

Поэтому часть сайтов уже идет на уступки и вместо автоматической загрузки новых материалов ставит кнопки «Показать дальше», «Загрузить еще» и так далее:
proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2Fd2d74c1a2b02085abeff03954f2f50c2f7a5a82c.png&hash=51462cfcfd6fe9ba401be7325ef6121f

В этой ситуации пользователь сам решает, хочет он видеть еще материалы.

Некоторые интернет-магазины вместо бесконечного листа товаров предлагают страницы с товарами.

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

4 Использование флэш​


Флэш (Flash) - популярная некогда технология, использовавшаяся на многих сайтах. Флэш позволял создавать интересные, красочные и интерактивные сайты. Они выделялись и запоминались на фоне других ресурсов своей оригинальностью. Но технология имеет и недостатки, главный из которых - для просмотра флэш необходимо устанавливать отдельный плагин.
proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F2889997d381e59a20277f0b552de4a54f90d7411.jpeg&hash=1b8887c7353743388b2d57d72a6048e9

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



BleepingComputer



пишет, что в 2014 году 80% пользователей Chrome раз в день заходили хотя бы на одну страницу, где использовался флэш. В 2018 этих пользователей стало менее 8%!

Флэш был разработан компанией Adobe Systems: летом 2017 года она официально признала технологию устаревшей, поддержка и распространение флэша будет остановлена в конце 2020 года.

Поэтому если у вас на сайте используется флэш, сейчас самое время подумать над модернизацией сайта.

5 Стоковые фотоснимки​


До сих пор на многих сайтах на нас смотрят лица веселых мужчин и счастливых девушек в строгих костюмах и с белоснежными улыбками. Рукопожатия, люди за компьютером с гарнитурой… таких фотографий стало так много, что они уже не вызывают ничего, кроме ощущения искусственности и скуки.
proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2Fb95c55dc497f3b545e38c07d58678772f9c5926e.jpeg&hash=92e9c315af4f27d16cbdd184a750ad5a

Такие фотографии владельцы сайтов покупают в фотобанках - самый простой и быстрый способ получить нужное изображение. Но если вы хотите выделиться из толпы одинаковых сайтов с одинаковыми лицами, нужно что-то оригинальное. Например, фотосессия с сотрудниками своей компании:
proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Fdefault%2F0001%2F01%2F2f667799620799ed1c94ea0b644385778ab1d576.png&hash=bfa75c01bce139a319b0c36b473f034a

Либо оригинальные рисунки, специально заказанные для сайта у дизайнера или художника.​