I. Button là gì?
Button (nút) là một thành phần trong giao diện người dùng (UI) thường được sử dụng trong thiết kế web và ứng dụng. Khi người dùng click vào button, một hành động cụ thể sẽ được thực hiện.
II. Button có vai trò như thế nào trong thiết kế website
Kêu gọi hành động: là những nút hướng người dùng tới những hành động cụ thể mà doanh nghiệp muốn, thường sau những nội dung ở website sẽ có những nút cho phép người xem có thể ấn vào để tiếp tục hành động của mình như Xem thêm, Đăng ký,...
Tăng tỷ lệ chuyển đổi: hoạt động như một biển chỉ dẫn người xem cần làm gì tiếp theo, một button hiệu quả sẽ giúp doanh nghiệp đạt được mục tiêu doanh số, khách hàng tiềm năng
Tạo liên kết nội bộ: một chức năng khác của button là có thể giúp người dùng khám phá được nội dung khác trên cùng một website, giúp website của bạn được các công cụ tìm kiếm đánh giá tốt hơn bằng cách liên kết các bài viết, sản phẩm, dịch vụ một cách logic, liền mạch tạo cho người dùng cảm thấy dễ dàng hơn trong việc tìm kiếm thông tin
Trang trí: ngoài những chức năng chính thì nút button còn có một vai trò khác đó là tạo nên một giao diện website đẹp mắt, với vô vàn kiểu dáng thiết kế, màu sắc, kích thước khác nhau thì doanh nghiệp có thể điều chỉnh button một cách linh hoạt để phù hợp hơn theo phong cách thiết kế của website
Hoàn tất một hành động: giúp cho khách hàng bắt đầu hay kết thúc một hành động cụ thể nào đó trên website. Giúp doanh nghiệp thu được những thông tin cần thiết và giúp khách hàng hoàn tất một hành động và mang lại trải nghiệm tốt
III. Một số dạng button
1. Các loại nút theo cấp độ
Nút chính: thường được sử dụng cho những hành động mang tính hướng người xem thực hiện những hành động mà doanh nghiệp muốn. Nút chính thường được đặt ở những vị trí nổi bật với kích thước và màu sắc phù hợp với giao diện để tạo điểm nhấn cho khách hàng nhấp vào
Ví dụ: nút “Mua ngay” trên website của một shop thời trang
Nút phụ: nút có chức hỗ trợ cho nút chính, thường có kích thước, màu sắc và vị trí đặt khác hơn so với nút chính với chức năng là cung cấp thêm sự lựa chọn hay thông tin cho người dùng
Ví dụ: nút “ Nhạc của tôi” trên app Zing Mp3
Nút bổ trợ: là nút hỗ trợ cho các hoạt động khác của người dùng, giúp người dùng thực hiện một cách nhanh chóng và tiện lợi
Ví dụ: nút “Tải xuống”, “Chia sẻ”,...
2. Theo hình ảnh
- Hình chữ nhật/hình vuông: là dạng phổ biến và thường được sử dụng trong thiết kế, mang lại cảm giác mạnh mẽ, ổn định và truyền thống
- Hình tròn: mang lại cảm giác mềm mại, thân thiện thường được sử dụng với các chức năng đơn giản, dễ hiểu như các nút “back to top”, “add”, hoặc các nút điều hướng nhỏ.
- Hình bo góc: là sự kết hợp giữa hình chữ nhật và hình tròn mang lại cảm giác hiện đại và dễ nhìn. Hình bo góc được sử dụng nhiều trong thiết kế và đảm nhận những chức năng quan trọng hay được sử dụng thường xuyên
- Icon: là những hình ảnh nhỏ biểu diễn một ý tưởng hay hành động, giúp người dùng nhận biết được chức năng của nút mà không cần hướng dẫn.
3. Theo phong cách
- Đường viền: không chỉ là phần bao quanh nút mà còn đóng vai trò trong việc tạo sự phân cấp và điểm nhận cho button với đa dạng những màu sắc, đường nét, độ dày
- 3d- đổ bóng (shadows button): là dạng quen thuộc với hầu hết người dùng, họ thường có phản ứng khá tốt với dạng hình ảnh ba chiều
- Trong suốt (Ghost button): là dạng có viền bao, màu viền không rõ nét, nền trong suốt,...giúp người xem chú ý hơn vì sự khác biệt trên trang website
4. Theo chức năng
- Gạt (Toggle): nút gạt thường có dạng hình tròn hoặc hình vuông, cho phép người dùng bật/tắt một hoặc nhiều trạng thái của website
- Dropdown: cho phép hiển thị thêm nhiều sự lựa chọn khi được click vào, thường được doanh nghiệp sử dụng để tiết kiệm không gian cho trang web và xuất hiện khi có người cần
- Loading: là nút được dùng để thông báo cho người dùng là hệ thống đang xử lý yêu cầu của họ đi kèm với biểu tượng hoặc thanh tiến trình để cho người dùng nắm được thông tin.
IV. Một số lưu ý khi thiết kế button
- Phân cấp rõ ràng: những nút quan trọng nên được thiết kế nổi bật hơn những nút còn lại
- Không sử dụng quá nhiều: quá nhiều button trên một giao diện web sẽ làm người xem rối mắt và khó tập trung vào những hành động chính
- Đồng bộ với thiết kế: có sự đồng bộ về màu sắc, phong cách thiết kế và phù hợp với tổng thể website
- Kích thước phù hợp: các nút button cần phải được thiết kế sao cho phù hợp với người dùng để không gây khó bấm trong quá trình tương tác
- Thứ tự sắp đặt: là yếu tố cũng khá quan trọng trong việc giữ sự hài hòa và tự nhiên trong việc tương tác của người dùng với hệ thống.
V. Một số button kinh điển
- Call to Action (CTA): Button kêu gọi hành động như "Mua ngay", "Đăng ký".
- Nút share: Chia sẻ nội dung trên mạng xã hội.
- Nút hamburger: Nút ba gạch biểu tượng của menu trên di động.
- Nút submit: Dùng để gửi form.
- Nút social: Kết nối đến các tài khoản mạng xã hội.
- Nút close: Đóng cửa sổ, popup.
- Nút back to top: Đưa người dùng quay lại đầu trang.
- VN/ENG: Chuyển đổi ngôn ngữ trang web.
- Nút like: Bày tỏ yêu thích nội dung.
- Nút view more: Xem thêm nội dung hoặc sản phẩm.
- Nút live chat: Kết nối với bộ phận hỗ trợ.
