Дуже легко зробити помилку. І неважливо, чи ви досвідчений спеціаліст або лише починаєте свій шлях в веб-дизайні.
Створення сайтів, логотипів або застосунків, креатив взагалі — все це супроводжується вчиненням помилок. На перший погляд всі ці проекти мають стандартний набір елементів обов’язкових для показу, але попри цю «стандартність» веб-дизайнери чомусь забувають про деякі з них.
До того ж, замовники, яким дуже часто не зрозуміло що, куди, навіщо і чому в макеті розташовується, тим паче не думають по подібні речі. Тому веб-дизайнер має враховувати всі нюанси наперед, щоб запобігти розробці макету за принципом «нехай буде».
Нижче перелічені 20 речей, про які ми забуваємо найчастіше.
1. Екран інтро
Чи то веб-сайт або мобільний додаток, користувач одразу має розуміти мету з якою він сюди прийшов. Стиль, в якому реалізований екран, безсумнівно дуже важливий, адже він візуально формує мету додатку/сайту, його образ.
2. Favicon
Favicon — це така дрібничка, що відображає бренд або тематику сайту. Проте, навіть професіонал, що точно знає як створити логотип, за який не соромно перед замовниками, може забути про цю маленьку, але дуже важливу деталь.
3. Форма «забули пароль»
Як часто ви забували пароль на сайті? Думаю з кожним таке траплялося. Та коли вас перекидає з однієї сторінки на іншу і так безліч разів… Чому ж, біс йому, не можна створити просту та зручну форму «забули пароль»? І головне — це прекрасний привід застосувати анімацію.
4. Сторінка 404
Натикаючись на сторінку помилки 404, користувачі зазвичай намагаються якомога скоріше її закрити та забути. Не дивно, що веб-дизайнери іноді роблять те ж саме. Щоб не втратити своїх відвідувачів, найкращим буде створити для цієї найпоширенішої помилки в інтернеті незвичайне оформлення.
5. Аватарка користувача за замовчуванням
6. Інструмент для обрізки фото для профіля користувача
7. Сторінка допомоги користувачам
Ця сторінка є однією з найважливіших на сайті, адже саме туди відправиться клієнт, коли зрозуміє, що він нічого не розуміє. Забувати про неї не варто.
8. Поведінка при прокрутці
В інтернеті тенденція зростання кількості мобільних користувачів актуальна як ніколи. Дуже важливо бути впевненим, що при скролінгу в мобільній версії все зроблено як слід.
9. Повідомлення про помилку
Коли користувач бачить повідомлення про помилку… Всі ми знаємо, до чого це призводить. Та якщо веб-дизайнер опанував мистецтво повідомлень про помилку, реакція користувача може бути зовсім іншою.
10. Усі стани кнопок
11. Кнопка виходу з програми
Можливо вас це здивує, та користувач може не тільки авторизовуватися на сайті чи застосунку, але й виходити з нього (log out) .
12. Опція видалення облікового запису користувача
Так, користувачі іноді можуть видаляти свої профілі. Не так вже і важко додати одну кнопку до налаштувань, але все ж таки ми забуваємо. Крім того, на цій сторінці можна показати користувачу, що він втрачатиме, якщо видалиться.
13. Порожній випадаючий список автозаповнення
14. Пагінація
Здавалося б, як можна забути про пагінацю… І таке трапляється.
15. Стан завантаження
Користувачі не люблять чекати. Дуже не люблять. Анімований індикатор завантаження — ідеальний інструмент, який дизайнер може використати, щоб відволікти їхню увагу, тому краще не забувати про нього при створенні макету.
16. Системні сповіщення
17. Сторінка угод, ліцензії, умов використання і т.д.
Так, це нудно. Саме тому ми часто про забуваємо про такі речі. Особливо в світлі GDPR.
18. Видалення і його відміна
Ви ніколи не видаляли щось ненавмисно і потім думали: «Як же це повернути?» Не забувайте додати анімацію відміни видалення до свого макету — це буде вам плюсиком до карми.
19. Порожній стан, коли немає результатів
20. Крок «поділитися»
Ми так звикли, що все можна поширити в соціальні мережі, що вже навіть забуваємо подумати про цей крок…
До речі, якщо вам сподобалася стаття, не забувайте поширити її друзям ;)
* * *
Ну, здається все. Наостанок лише додам — ніколи не забувайте про доцільну анімацію, бо колись настане момент, коли замовник захоче анімовану форму на завтрашній день.
Титульне зображення: andrewvec / Depositphotos
