Сегодня расскажу про распространенные ошибки, которые встречаются у многих начинающих веб и UX дизайнеров, а также о том, как этих ошибок избежать.
1. Выделяйте главный объект или действие
Хороший дизайн фокусируется на главном: а главное в любом дизайне - полезное действии и содержание. Например, на странице товара в интернет‑магазине главным будет сам товар и его фотографии, а не навигация по магазину, технические характеристики, теги, отзывы и социокнопки. На странице выбора способов оплаты в центре должны стоять их крупные обозначения, а не сопроводительный текст.
Типичная ошибка дизайнера: засунуть в макет всё, что требуется по техническому заданию, а потом пытаться хоть как‑то распихать элементы.
Посмотрите на скриншот ниже: фото товара занимают от силы 10% экрана, хотя они должны являться главным элементом всей страницы, поскольку именно товар интересует посетителя страницы на данном этапе. Отзывы, похожие товары, кредит, акции, адреса магазинов, яркие цвета в навигационном поле -- мусор, который отвлекает от главного элемента страницы.
Лучше, но не идеально у Ситилинк, если убрать водяные знаки и бесполезную плашку на правой части экрана, станет еще симпатичней.
А еще лучше посмотрите, как Apple презентуют iPhone 11, тут всё описание товара оформлено в стильный лонг-рид, по мере которого презентуются основные фичи новой модели.
2. Не злоупотребляйте украшательствами
Не делайте из интерфейса цыганские интерьер
Чем проще и лаконичней интерфейс, тем лучше и понятнее, а значит проще сфокусироваться на полезном действии пользователя и цели его визита на страницу. Не надо перегружать, не надо излишне усложнять.
3. Сделайте кнопочку приятной
Делайте кнопки, иконки и любые нажимаемые элементы большими и приятным, в них должно быть легко попасть.
Выпадающее меню делайте пошире, некликабельных просветов быть не должно.
Иногда кнопке отдаётся несправедливо мало места только потому, что у неё короткая надпись.
4. Не забывайте об обратной связи
Обратная связь — это реакция интерфейса на действия пользователя. Она должна срабатывать при любом действии пользователя: наведение на ссылку, кнопку, скроллинг.
5. Максимум автоматизации
Интерфейс — это барьер между пользователем и целевым действием. Чем меньше и проще интерфейс, тем меньше риск потерять покупателя на пути к форме оплаты. Поэтому всегда спрашивайте себя: а нужен ли интерфейс? Нельзя ли автоматизировать все так чтобы заставлять покупателя заполнять трёхшаговую форму заказа? Можно ли оставить для покупателя только одну кнопку? А можно ли и без кнопки?
6. Любите флаг
Любимый приём начинающих дизайнеров: растянуть несколько строк по ширине страницы, чтобы получилось «ровненько и аккуратно». На деле выходит страшный и нечитаемый кирпич.
Аккуратнее всего будет смотреться флаг, текст будет легко читаться, верстка не будет страдать.
7. Выделяйте ссылки
Простейший способ выделить ссылку — покрасить её в синий цвет и подчеркнуть. Иногда ссылку нужно покрасить в чёрный, зелёный или другой цвет. Тогда опознать её помогает подчёркивание.
Важно: не красьте ссылку в сиреневый — пользователь решит, что она уже посещена. Ссылка должна менять цвет при наведении.
Итого
- Всегда помните о целевом действии и пути клиента
- Проще = лучше
- Приятные кнопки
- Обратная связь
- Максимум автоматизации
- Флаг и текст
- Ссылки красим
8. Засуньте бесконечную прокрутку себе в жопу и там прокрутите до конца.
9. Всплывающие окна и уведомления тоже позасовывайте себе в жопу.
10. За кликабельные элементы, которые выглядят как простой рисунок, и простые рисунки, которые выглядят как кликабельные элементы, нужно вбивать в голову гвоздь и окрашивать его шляпку под родинку.
Я несколько раз натыкался, когда на сайте бесконечная прокрутка, а нужная мне информация в подвале.
Комментарий недоступен
иди отсюда
Васяру протек
разбивать название бренда на две строчки и еще в кавычках и еще в заголовке—
а это точно идеально сверстанный текст?
У pleer.ru хороший дизайн. Отчасти из-за него, я делаю там покупки, удобно.
ну возможно ты слепой, конечно, тогда да, действительно хороший
хотелось бы посмотреть на плохой дизайн в твоем понимании
Ты не так меня понял.
У плеер, такой своеобразный дизайн, что те кто не уверены в нем, пройдут мимо думая что это лохотрон.
Но у плеера, такие скидки бывают на товары, что благодаря неуверенным, я могу успеть и забрать товар по скидке.
что за чушь.
То есть вы сейчас серьёзно, осуждаете меня за мой выбор и мои действия? Оскорбляя меня и говоря, что я слеп.
Ну збс.
Стадо дезигнеров, блять.
Ты хуйню несешь сразу по двум параметрам. Слово чушь - это не оскорбление, раз, два - я тебе расписала почему твоим покупкам не помогает всратый дизайн, это ты придумал морозную стори, которая не имеет отношения к действительности, а мы стадо, да. И я тебе написала почему твоя теория совершенно не рабочая, тем более ты забываешь что им не ты персонально нужен, а покупателей побольше, а не поменьше, чтобы ты успел купить.
Ну может на старте это и работало, а сейчас у тебя уже сова порвалась такое писать
Сова?
Которую ты на глобус натягиваешь с пользой такой всратоты.
Вот если бы они оформление меняли каждые полгода на такое же всратое, но другое и менее узнаваемое и сделали бы себе систему стремно оформленных, но по-разному лендосов, которые вели бы на основной, тогда да.
А так у них просто всратый дизайн и такие цели они не преследовали и сейчас 2к20 только совсем глухой пейзанин не знает про их скидки и магаз, чтобы думать, что это спам
Гениально!
ахах, интересный взгляд на это дело