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é!

Hình chữ nhật/hình vuông

Cá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óc

Cá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 trong Design là gì

Button tròn

Thô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.

Button trong Design là gì

Các button cắt góc

Cá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 trong Design là gì

Button hình bình hành

Hì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.

Button trong Design là gì
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ư:

  • Trải nghiệm người dùng trên toàn bộ web, ví dụ như website được thiết kế theo phong cách khá lỗi thời, trang load quá chậm, hay thậm chí là scroll chưa hết trang đã bị out ra ngoài,…
  • Cách thức thế hiện button, ví dụ như button quá mờ, quá nhỏ, hoặc button không click được,…
  • Và quan trong hơn hết, là những nội dung dẫn dắt xoay quanh cái nút bấm đó, nó phải hữu ích và mang lại giá trị cho khách hàng, khiến họ bị thuyết phục, và có động lực để bấm vào hay không

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ề Button

Cá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 🧩

Button trong Design là gì

Text label, container và icon là 3 thành phần cấu tạo chính của một Button, trong đó:

  • Text label: là nội dung chính của button, đề cập đến hành động tiếp theo khi user bấm vào button đó
  • Container: là nền của button, chứa text label và icon
  • Icon: bổ trợ minh họa, giúp làm rõ nội dung chính của button

→ 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ại

Như 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)

Button trong Design là gì

Flat button (Text button): Button 100% text, không có outline

Button trong Design là gì

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

Button trong Design là gì

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.

Button trong Design là gì

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.

Button trong Design là gì

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:

  • Default: Trạng thái bình thường, nôm na là button chưa bị ai đả động vào ý 😁
  • Hover: Trạng thái này bạn sẽ chỉ thấy được ở các thiết kế web, còn ở mobile thì không vì nó không được hỗ trợ. Đây là trạng thái khi bạn rơ chuột đến các button, nhưng không click vào (Bạn xem ví dụ bên dưới để rõ nhé). Điểm cộng của trạng thái này là làm cho các button trở sống động và thực hơn, đưa ra tín hiệu với người dùng rằng đây là nơi họ có thể tương tác và nhấp vào được.
  • Focus: Mặc dù ngày nay kiểu trạng thái này không còn được chú trọng và dùng nhiều như xưa, do phụ thuộc vào thay đổi của các trình duyệt, nhưng nó rất quan trọng đối với khả năng tiếp cận của người dùng. Thông thường, trạng thái này bạn sẽ dễ gặp nhất ở các form điền thông tin, khi khung text field được chọn, nó sẽ hiển thị dạng đường viền màu xanh lam nhạt xung quanh khiến chúng nổi bật hơn so với những fields còn lại, giúp người dùng tập trung vào thông tin mà họ cần cung cấp.
  • Active (Pressed): Ở đây có 2 khái niệm là Press và Active. Bạn có thể hiểu sau khi nhấn (Press) thì button sẽ chuyển sang trạng thái được chọn (Active). Do đó, 2 trạng thái này gần như giống nhau, chúng diễn ra rất nhanh nên thường sẽ được gộp chung lại thành một trên cả giao diện web và mobile.
  • Disabled: Trạng thái này rất dễ nhận diện nha! Chúng trông khá buồn tẻ và nhạt nhẽo như cách nó biểu thị rằng button này vẫn chưa sẵn sàng để được tương tác. 🤣 Cụ thể trạng thái này được sử dụng trong các trường hợp:
    • Để chặn một hành động: Ví dụ bạn cần phải điền hết thông tin thì mới được đi tiếp
    • Khi một hành động được gắn với một tính năng cao cấp yêu cầu nâng cấp trước khi sử dụng
    • P/s: Dù là ở trường hợp nào đi chăng nữa, các thiết kế cần phải được ghép nối với một message giải thích để mô tả lý do vì sao hành động không khả dụng bạn nhé.
  • Loading / Processing: Và cuối cùng là trạng thái Loading hay Processing (đang thực hiện một quá trình,/ công việc nào đó). Trạng thái này được dùng để hiển thị tín hiệu rằng hệ thống của web hoặc mobile đang làm việc để xử lý yêu cầu của bạn.

⭐️ Để 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 😄

Button trong Design là gì
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 button

Phâ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):

  • Nội dung mang tính kêu gọi, đi kèm lợi ích nhằm mục đích gia tăng lượt chuyển hoá traffic.
  • Công thức chung: Value + Relevance = More Conversions
  • Xuất hiện chủ yếu ở cuối flow hoặc những vị trí dễ thấy như: Header, Top/ Middle/Bottom of the page hoặc Footer,… với màu sắc nổi bật, gây sự chú ý
  • Chức năng: Kêu gọi người dùng thực hiện một hành động mua bán, giao dịch,…

Button trong Design là gì
Ở ví dụ này, 50% off (Value) đi kèm với việc chương trình khuyến mãi chỉ diễn ra trong hôm nay (Relevance). Ai đã là fan của giày Adidos thì khó mà bỏ qua đúng không nào?

Functional button (Nút chức năng):

  • Nội dung button mang tính hướng dẫn, giúp người dùng dự đoán được điều xảy ra tiếp theo.
  • Công thức chung thường là Verb- first command và Noun. Ví dụ như: Share, Next, Confirm,…
  • Chức năng chính là dẫn dắt người dùng hoàn thành một hành động hoặc liên kết các screen/page
  • Thường sẽ nằm ở các screen/page giữa các flow

Button trong Design là gì
Nút “Get my OTP” là ví dụ cho Functional button

Một vài điều cần lưu ý khi viết nội dung cho button

  • Nếu có thể, hãy viết nội dung trùng khớp với điều mà người dùng muốn nói
  • Button không đứng riêng một mình, hãy giúp nó liên kết với Title và Description hoặc bất kì nội dung nào trước nó, bằng cách sử dụng keyword chung
  • Nội dung của một button mình khuyến khích không nên quá 2 dòng. Tuỳ kích thước trên mỗi thiết bị, bạn hãy cân nhắc số lượng kí tự của button để khi hiển thị nội dung đó trên các thiết bị màn hình nhỏ hơn sẽ không bị gãy layout UI
  • Và cuối cùng, trước khi bắt tay vào việc sáng tạo nội dung, bạn hãy xác định vai trò và mục đích của button (Functional button hay Sale-focused button?) để đảm bảo nội dung được tạo ra sẽ sát với ngữ cảnh sử dụng của người dùng

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:

Button trong Design là gì

👉🏻 Phân tích:
Để tạo tính liên kết cho nội dung ở 3 mục Title, Description và Button mình đã sử dụng 1 keyword chung là “mua”.

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