Button trong Design là gì
Các button sẽ xuất hiện rất nhiều lần xung quanh chúng ta trong các thiết kế UI, từ màn hình đăng ký sử dụng đến màn hình checkout mua bán online, ở đâu bạn cũng có thể thấy chúng. Tuy nhiên, mỗi button bạn thấy sẽ đều mang một hình dáng khác nhau. Vậy ý nghĩa đằng sau chúng là gì, hãy cùng Hybrid Technologies giải mã các button phổ biến và mục đích sử dụng của chúng nhé! Show
Hình chữ nhật/hình vuôngCác cạnh thẳng và sắc nét tạo ra vẻ hiện đại, nghiêm túc và kỷ luật. Các button hình vuông và hình chữ nhật tạo cảm giác chuyên nghiệp và đáng tin cậy. Bạn có thể sử dụng chúng trong các thiết kế dự án thời trang, công ty, kinh doanh và công nghệ. Button bo gócCác button với góc được bo tròn trông rất thân thiện. Chúng gợi tâm trạng tích cực, trực quan, truyền tải sự tự tin, nhưng đôi khi lại rất khó để phù hợp với những bối cảnh hướng đến sự chuyên nghiệp. Bạn cũng có thể sử dụng kiểu button này với một bảng màu tươi và bùng nổ, màu sắc và hình dạng sẽ bổ trợ ý nghĩa cho nhau. Button trònThông thường, các button như thế này mang tính chất hấp dẫn và vui tươi. Chúng truyền tải sự hài hòa và cân bằng. Tuy nhiên, giống như các button bo góc, button tròn cũng rất khó để phù hợp với bối cảnh chuyên nghiệp. Các button tròn có vẻ được sinh ra để sử dụng trong thiết kế dự án giải trí, âm nhạc và trò chơi. Các button cắt gócCác button cắt góc sẽ mang lại cảm giác trừu tượng và hướng đến tương lai. Nếu bạn kết hợp với các yếu tố bất đối xứng, các nút này sẽ hoạt động một cách hoàn hảo. Bạn có thể sử dụng chúng trong những thiết kế về tương lai như khoa học viễn tưởng, công nghệ,… Button hình bình hànhHình dáng này gợi đến chuyển động và động lực. Chúng có ý nghĩa với người dùng rằng các yếu tố có chuyển động và nó có thể được sử dụng trong các trang thể thao, đánh giá và trang sự kiện. Mọi kiểu button trong giao diện của bạn sẽ đóng một vai trò quan trọng và giúp xác định tâm trạng và mục đích mà sản phẩm của bạn truyền tải. Hãy thử design với các hình dạng khác nhau để có được một hình button phù hợp nhất và cũng đừng quên đi sự nhất quán và quản lý màu sắc tốt nhé! Nguồn: Romero, D. (2020, February 11) Styling your UI Buttons (and their meaning). Hồi mình mới làm Marketing, mỗi lần viết content mà gặp phải cái CTA button trên banner quảng cáo hay form đăng ký thông tin, là mình xoắn cả lên, đầu tư kỹ lắm, kiểu như phải viết sao cho hay thiệt hay, gây thuyết phục mà vẫn đảm bảo ngắn gọn, độc lạ. Nghe qua là thấy khó rồi, mình cũng lọ mọ trên Google, tìm kiếm đủ kiểu, nào là “Best CTA message” hay “Tips for killer CTA button” 😑 Kết quả là mình cũng tìm ra được những idea chất lượng cho CTA button, nhưng mà sau nhiều lần như vậy, những content của mình không còn mới mẻ nữa, mình nhận ra là không phải CTA button cứ có nội dung độc lạ là sẽ có nhiều người click vào, mà nó còn phụ thuộc vào rất nhiều những yếu tố khác, ví dụ như:
Giả định mọi yếu tố xoay quanh phục vụ cho CTA button đều hoàn hảo, thì với nội dung hết sức bình thường, phổ biến, ví dụ như “Buy now”, “Get now” hay “Đăng ký ngay” cũng bỗng dưng có sức hút mãnh liệt với rất nhiều người, và khiến họ click vào mà không do dự. Mình kể dong dài như vậy là vì mình không muốn các bạn quá áp lực với việc tạo ra một content như mình trước đây. Vậy nên bây giờ, khi muốn viết về một thứ gì đó, mình có thói quen sẽ tìm hiểu nó thật kỹ, để tránh bị rối và xoắn não lên. Quay trở lại với chủ đề Button trong thiết kế sản phẩm, bạn sẽ gặp đa dạng loại button phục vụ cho mỗi mục đích khác nhau của sản phẩm, chúng xuất hiện khắp nơi và xuyên suốt trải nghiệm của khách hàng. Do đó, để có thể viết nội dung cho Button (Nút bấm) một cách hiệu quả và thuyết phục user nhất, chúng ta hãy dạo một vòng để tìm hiểu một chút “UX” về Button để không ai phải chê bạn là 1 UX Writer, có U (User – Người dùng) mà không có X (Experience – Trải nghiệm) nhé 😊 Hiểu về ButtonCách dùng 💡Hiểu đơn giản, button là nút bấm được dùng để kích hoạt một hoạt động (trigger action). Trong cùng một sản phẩm công nghệ, các button có chức năng truyền đạt các lời kêu gọi hành động (CTA message) tới người dùng và cho phép người dùng thực hiện các hành động và lựa chọn chỉ với một lần click. Thành phần cấu tạo 🧩Text label, container và icon là 3 thành phần cấu tạo chính của một Button, trong đó:
→ Lưu ý: Tùy vào tính chất và trường hợp cụ thể, một button không nhất thiết phải có đầy đủ 3 thành phần trên, nên chúng ta có thể cân nhắc giản lược sao cho hợp lý nhé. Phân loạiNhư chúng ta tìm hiểu ở trên về cấu tạo của button, bạn sẽ thấy button được hiển thị rất đa dạng nhưng bạn yên tâm là chúng đều được sắp xếp và gom về 5 “mối” như sau: Raised button (Contained button/ solid button): Button có background được fill màu và được đổ bóng (shadow) Flat button (Text button): Button 100% text, không có outline Ghost button (Outlined button): Là những button được thiết kế với viền mỏng và nội dung nằm trên một background trong suốt Icon button: Là những button ở dạng biểu tượng (icon), có thể đi cùng với 1 label text để giải thích thêm về chức năng của button. FAB button: Yeh, loại button cuối cùng! Nếu như bạn có tham khảo trang Material.io, bạn sẽ biết đây là kiểu button được khởi xướng bởi Google. Button thường sẽ ở dạng hình tròn và bao gồm một biểu tượng nằm ở giữa. và khi xuất hiện, nó sẽ hiển thị trên hết tất cả các nội dung. Trạng thái của button (button state)Bạn biết không, việc biểu thị các trạng thái của một button nói riêng, hay bất kì một component nào nói chung, ví dụ text field hay tab,… là cách để sản phẩm phản hồi với thao tác của người dùng, đem đến cho họ cảm giác trực quan và sinh động. Do đó, khi chúng ta hiểu và quan tâm các tương tác nhỏ nhặt này (micro-interaction) dù ít hay nhiều, cũng sẽ giúp ích trong việc cải thiện trải nghiệm của người dùng. Quay trở lại thì các trạng thái của 1 button sẽ bao gồm:
⭐️ Để quan sát rõ hơn về các trạng thái của button, bạn có thể xem qua video hướng dẫn setup các trạng thái này của Webflow. Đừng để ý đến việc setup, bạn chỉ cần quan tâm đến định nghĩa, và cách các trạng thái đó hiển thị như thế nào trên web thôi nha. Như bạn đã thấy ở video trên, mỗi trạng thái sẽ ứng với một hiệu ứng màu sắc khác nhau. Tiếp theo dưới đây là ví dụ 1 bản thiết kế UI của button ở từng trạng thái trong một bộ Design System. Khi được đưa vào sản phẩm, button phải được đảm bảo y như thiết kế, hiển thị chính xác các màu sắc tương ứng với tương tác của user. Thật thú vị đúng không nào 😄 Source: Dribbles, UI Kit – Buttons designed by Paul Hatch for Console Connect by PCCW Global⭐️ Ngoài ra, để hiểu sâu hơn, bạn có thể đọc tham khảo thêm về tài liệu Button States của Google: Tại đây 2. Viết nội dung cho buttonPhân biệt giữa Functional button và Sale-focused button (CTA button)Hai khái niệm về button này mình được biết trong 1 lần tham khảo tài liệu của cô Kinneret Yifrah – Người tiên phong trong lình vực Microcopy UX Writing, và là tác giả của quyển “Microcopy: The Complete Guide”. Bạn có nhớ câu chuyện mình kể lúc đầu về việc băn khoăn mãi về cách viết button sao cho thu hút không? Có thể bạn cũng đã hình dung chút chút cách viết của 2 loại button này qua tên gọi. Và đi từ thực tế, sau một thời gian va chạm với việc viết nội dung, mình có thể đúc kết một vài điểm khác nhau cho 2 loại button này như sau: Sale-focused button (Nút chốt sale):
Functional button (Nút chức năng):
Một vài điều cần lưu ý khi viết nội dung cho button
Cùng nhìn qua ví dụ của mình nhé: 👉🏻 Đặt vấn đề: Hãng giày nổi tiếng Adidos đang có chương trình khuyến mãi “Giảm 50% cho mỗi đơn hàng 3 đôi giày” và họ muốn bạn thể hiện thông báo đó bằng popup mỗi khi có khách hàng truy cập vào website. 👉🏻 Nội dung mình viết: 👉🏻 Phân tích: Bên cạnh đó, để giúp user scan thông tin nhanh nhất có thể, mình đã đặt hẳn giá trị 50% off ra đầu Title + kèm với điều kiện áp dụng là “khi mua 3 đôi giày” cùng lúc. Những khách hàng thực sự hứng thú về chương trình khuyến mãi này thì sẽ không thể bỏ qua Description – đang giữ vai trò là bổ trợ và thúc đẩy user mua hàng nhanh. Có thể nói, việc giới hạn khuyến mãi chỉ diễn ra trong 1 ngày là 1 trigger khá hiệu quả, vì nó mang lại cảm giác tiếc nuối nếu phải bỏ qua chương trình khuyến mãi này. Đó cũng chính là lí do vì sao button có nội dung là “Mua ngay” – đánh thẳng vào trọng tâm mua ngay kẻo hết, nhấn mạnh thêm ý đã được thể hiện ở Description. ❤️ Nhắn nhủ: Bài viết này chỉ mang tính chất tham khảo, nên bạn có thể linh hoạt thay đổi, ứng biến để phù hợp với môi trường làm việc hơn nhé. Hy vọng sẽ giúp ích được cho các bạn. Nếu có bất kì thắc mắc hay sai sót nào, mọi người hãy để lại comment bên dưới để Trang có thể giải đáp và tiếp thu góp ý từ mọi người nhé. 4.7 3 votes Article Rating |