Source
interfaces.prjctr | vnotchenko week | Як створити smooth вебформу?Ми прагнемо уникати розташування деструкти...
1 400 Views/Reach
2024-12-26 08:01
Message №1591
Як створити smooth вебформу?
Ми прагнемо уникати розташування деструктивних кнопок поруч із кнопками, які виконують важливі дії або переводять користувача до наступного кроку. Одночасно важливо запобігти помилкам, випадковим натисканням і прискорити взаємодію. Тому важливо максимально чітко позначати функціонал кнопок. Кнопки «Скинути» (Reset) та «Скасувати» (Cancel) мають бути розташовані у верхньому правому куті екрана — бажано, щоб вони виглядали меншими за розміром і нагадували посилання. Кнопка «Очистити» (Clear) повинна розташовуватися поруч із поточним полем вводу, виглядати як посилання і мати невеликий шрифт. Кнопка «Оновити» (Update) має бути другорядною кнопкою стандартного вигляду, розташованою поруч із полем вводу. Кнопка «Назад/Попередній» (Back/Previous) повинна виглядати як посилання у верхньому лівому куті екрана. Кнопка «Далі» (Next) розташовується в нижньому лівому куті екрана. Кнопки «Поділитися» (Share) та «Експорт у PDF» (Export as PDF) варто розмістити у верхньому правому куті екрана. Для індикатора прогресу краще використати вертикальну шкалу, розташовану в бічній панелі зліва або справа. Кнопка «Зберегти та вийти» (Save and Exit) повинна розташовуватися поруч із кнопкою «Далі» (Next). Кейс від Віталія Фрідмана, автора і куратора воркшопів Design Patterns For Complex Web Forms, Measuring UX and Impact of Design, Designing for Complex UI, UX Strategy, Design Patterns for AI Interfaces, засновника та креативного ліда у Smashing Media.
Ми прагнемо уникати розташування деструктивних кнопок поруч із кнопками, які виконують важливі дії або переводять користувача до наступного кроку. Одночасно важливо запобігти помилкам, випадковим натисканням і прискорити взаємодію. Тому важливо максимально чітко позначати функціонал кнопок. Кнопки «Скинути» (Reset) та «Скасувати» (Cancel) мають бути розташовані у верхньому правому куті екрана — бажано, щоб вони виглядали меншими за розміром і нагадували посилання. Кнопка «Очистити» (Clear) повинна розташовуватися поруч із поточним полем вводу, виглядати як посилання і мати невеликий шрифт. Кнопка «Оновити» (Update) має бути другорядною кнопкою стандартного вигляду, розташованою поруч із полем вводу. Кнопка «Назад/Попередній» (Back/Previous) повинна виглядати як посилання у верхньому лівому куті екрана. Кнопка «Далі» (Next) розташовується в нижньому лівому куті екрана. Кнопки «Поділитися» (Share) та «Експорт у PDF» (Export as PDF) варто розмістити у верхньому правому куті екрана. Для індикатора прогресу краще використати вертикальну шкалу, розташовану в бічній панелі зліва або справа. Кнопка «Зберегти та вийти» (Save and Exit) повинна розташовуватися поруч із кнопкою «Далі» (Next). Кейс від Віталія Фрідмана, автора і куратора воркшопів Design Patterns For Complex Web Forms, Measuring UX and Impact of Design, Designing for Complex UI, UX Strategy, Design Patterns for AI Interfaces, засновника та креативного ліда у Smashing Media.