Trang chủ » UI / UX » 5 mẹo để thiết kế nút Winning Mua

    5 mẹo để thiết kế nút Winning Mua

    Nếu bạn là một nhà thiết kế, hoặc một nhà tiếp thị trực tuyến, hoặc bạn tình cờ sở hữu một trang web nơi bạn cố gắng bán một thứ gì đó, đến một lúc nào đó bạn sẽ phải thiết kế một "nút mua" thích hợp. Và sau đó, bạn sẽ nhanh chóng phát hiện ra rằng chỉ cần đặt một “Mua ngay” văn bản trên một hình chữ nhật màu xanh là không đủ nếu bạn hy vọng cho bất kỳ kết quả tốt.

    May mắn thay, thiết kế một "nút mua" thích hợp không quá khó một khi bạn đã biết một số kiến ​​thức cơ bản. Ở đây đi.

    Trước hết, văn bản trên nút của bạn là điều quan trọng nhất, nhưng có một số tính năng khác cần được giải quyết. Tại sao tôi nói rằng văn bản là quan trọng nhất? Hãy tưởng tượng điều này - ý nghĩa của việc có một nút được thiết kế đẹp mắt nếu văn bản trên đó nói “Cút đi!”? Trường hợp đóng cửa. Bản sao tốt là nơi các khoản tiền được thực hiện.

    Trong bài viết hôm nay, chúng tôi thảo luận về 5 đặc điểm quan trọng của một "nút mua" thích hợp. Chúng ta hãy xem!

    1. Phong cách tổng thể

    Đây là điểm số 1 trong danh sách này không phải không có lý do, vì nó là đặc điểm quan trọng nhất.

    Bạn muốn biến nút của bạn thành một con bò màu tím. Đây là một khái niệm phổ biến bởi Seth Godin. Tóm lại, bạn muốn nó là đáng chú ý; bởi đáng chú ý tôi có nghĩa là một cái gì đó không thể bỏ qua. Một cái gì đó giống như một con bò màu tím ở giữa đồng cỏ.

    Một số nhà thiết kế không đặc biệt giỏi trong việc này. Thật hấp dẫn khi tạo một nút liên kết đẹp với màu sắc và kiểu dáng của trang web mà nó nằm. Lúc đầu, nó có vẻ là một ý tưởng rất tốt, chỉ có điều nó không phải là.

    Vấn đề là một nút như vậy là xa đáng chú ý. Bạn không muốn nút của bạn hòa vào; bạn muốn nó nổi bật Do đó, nó nên được tạo ra như là một yếu tố hoàn toàn riêng biệt chỉ xảy ra khi ngồi trên một số trang web, chứ không phải là thứ cần phải phù hợp với trang web đó.

    Hãy để tôi chỉ cho bạn một ví dụ tuyệt vời về nút giống như con bò màu tím.

    Mozilla Firefox

    Đây là những gì một trang tải xuống Firefox trông như thế nào. Tôi muốn bạn chú ý một điều. Nút bên trái, nút tải xuống, trông không giống bất cứ thứ gì khác trên trang đó. Đó là điều xanh duy nhất. Đây là nơi duy nhất trình bày logo Firefox. Đó là một trong những yếu tố lớn nhất ở đó. Nó nằm trên nếp gấp.

    Tất cả những đặc điểm này làm cho nút này cực kỳ rõ ràng. Đó là một con bò màu tím. Nếu bạn nói rằng bạn không thấy điều đó, bạn chỉ đang cố gắng gây ấn tượng với ai đó.

    Tóm lại: Nhằm có một nút đáng chú ý.

    2. Ngoại hình

    Hãy bắt đầu với màu.

    Nếu bạn muốn trở nên đáng chú ý, hãy sử dụng màu chưa được sử dụng ở bất kỳ nơi nào khác trên trang. Giống như những người Firefox đang làm trên trang web của họ. Bạn có thể sử dụng một công cụ như Color Scheme Designer để tìm màu trông đẹp với bảng màu hiện tại của trang web của bạn nhưng vẫn rất khác biệt.

    Và “khác nhau” là từ khóa ở đây. Nếu trang web của bạn chủ yếu là màu xanh, bạn không muốn có nút mua màu xanh. Bạn không muốn một màu xanh lam. Bạn không muốn bất cứ thứ gì trông có vẻ hơi xanh. Bạn muốn màu hồng, hoặc màu cam, v.v ... Tôi chắc chắn bạn sẽ nhận được điểm.

    Thêm một mẹo nữa. Màu cam được gọi là màu dễ thấy nhất ngay sau màu đỏ. Nhưng, nó không làm tăng tất cả những cảm xúc tiêu cực mà màu đỏ làm (những thứ như “dừng lại”, “coi chưng!”, và “nguy hiểm”). Nút màu cam phổ biến nhất trên internet có thể được tìm thấy trên amazon.com.

    Điều tiếp theo cần tập trung vào là kích thước của nút. Chà, tôi có thể nói gì, nó cần phải LỚN. Càng lớn nó càng tốt. (Một lần nữa, ví dụ về Firefox.)

    “Tôi có thể làm cho nó lớn hơn nữa không?” là một câu hỏi hay để hỏi trong giai đoạn thiết kế. Làm thật nhiều.

    Nó phải được đơn giản hay hào nhoáng? Một nút không thể quá hào nhoáng. Nhìn vào nút Firefox một lần nữa. Thật hào nhoáng. Nó có một con cáo màu cam trên đó, nhưng nó vẫn trông giống như một nút. Và đó là một ranh giới bạn không thể vượt qua. Nếu nút của bạn không giống như ai thì sẽ không có ai nhấp vào nút đó.

    Đó là lý do tại sao không có câu trả lời đơn giản nào tốt hơn - hào nhoáng hay đơn giản. Bạn chỉ cần tìm ra cho chính mình. Luôn chia bài kiểm tra. Tạo hai nút, một hào nhoáng và một đơn giản. Sử dụng cả hai cùng một lúc và xem cái nào hoạt động tốt hơn. Trình tối ưu hóa trang web của Google sẽ giúp bạn điều đó.

    Chỉ là một ví dụ nhanh về một nút đơn giản.

    ThemeFuse

    Như bạn có thể thấy nút không sử dụng bất kỳ con cáo màu cam nào, nhưng nó vẫn rất dễ nhìn. Thực tế, ThemeFuse (một cửa hàng chủ đề WordPress cao cấp, mà tôi là một phần của) cung cấp một ít thứ gọi là shortcodes. Trong số những thứ khác, những mã ngắn đó giúp dễ dàng tạo ra các nút trông đẹp mắt.

    Ví dụ: chỉ với một dòng:

    [button link = "domain.com"] Nhấp vào đây để mua sản phẩm tuyệt vời của tôi! [/ button]

    Tôi nhận được kết quả này:

    3. Phông chữ

    Phông chữ Sans-serif là tiêu chuẩn cho tất cả các loại nút. Đó là bởi vì phông chữ sans-serif rất dễ đọc cho mọi sử dụng trực tuyến. (Mặt khác, phông chữ serif tốt hơn cho các ấn phẩm in.)

    Bạn muốn bản sao trên nút của bạn càng dễ đọc càng tốt, vì đó là phần văn bản quan trọng nhất trên trang. Tất cả các mũ không phải là một ý tưởng tốt. Trường hợp hỗn hợp hoạt động tốt hơn nhiều. Trong trường hợp hỗn hợp, ý tôi là chữ cái đầu tiên của mỗi từ là ký tự viết hoa. (Ngoại trừ những từ như “cho”, “các”, “và”, v.v.)

    (Nguồn hình ảnh: Gomediazine)

    Một số phông chữ an toàn bạn có thể sử dụng là: Arial, Helvetica, Franklin Gothic, Myriad hoặc bất kỳ phông chữ sans-serif cổ điển nào khác, thực sự.

    Bây giờ những gì về màu sắc. Tất nhiên, bản sao phải tương phản cao với màu của nút. Bạn không muốn màu xám trên xám. Bạn muốn màu đen trắng hoặc xanh da cam.

    Một lần nữa, văn bản phải rất dễ đọc.

    4. Vị trí

    Vị trí tốt nhất phụ thuộc vào thiết kế trang web của bạn, điều này có lẽ không đáng ngạc nhiên. Nhưng vẫn còn một số quy tắc đáng để tuân theo.

    Đặt nó trong nơi rõ ràng nhất có thể. Đừng cố sáng tạo ở đây. Vị trí phải rõ ràng đối với khách hàng / người dùng.

    Mỗi khi ai đó truy cập trang web, họ sẽ thấy những thứ nhất định ở những nơi nhất định. Những thứ như: logo ở góc trên cùng bên trái, tóm tắt giỏ hàng ở góc trên bên phải, điều khoản bản quyền ở chân trang, v.v. Công việc của bạn là cố gắng tìm ra nơi rõ ràng nhất cho nút mua hàng và chỉ cần đặt nó ở đó.

    Tất nhiên, nó cần phải là nơi dễ thấy nhất cùng một lúc. Điều này có nghĩa là hai điều:

    1. chắc chắn rồi phải được đặt trên nếp gấp, và
    2. Đừng sợ khoảng trắng. Whitespace là một người bạn của mọi nhà thiết kế web giỏi. Hãy nhớ rằng, không quan trọng bạn có thể đặt bao nhiêu thứ trên một trang web, điều quan trọng là bạn có thể xóa bao nhiêu thứ khỏi nó.

    Bạn có thể đặt chiến lược vị trí của mình lên các steroid bằng cách sao chép nút và cũng đặt nó ở cuối trang. Theo cách đó, khi ai đó đọc qua toàn bộ trang, họ vẫn có thể thực hiện hành động ở cuối trang.

    5. Yếu tố phụ

    Đây là đóng băng trên bánh. Các yếu tố bổ sung cải thiện khả năng hiển thị của nút của bạn hơn nữa. Ví dụ về các yếu tố: mũi tên, giỏ hàng, kính lúp, dấu cộng hoặc các yếu tố thương hiệu khác nhau.

    Ví dụ yêu thích của tôi - ví dụ về Firefox - sử dụng một yếu tố cực kỳ thú vị - con cáo màu cam (còn gọi là logo của họ).

    Một nguyên tắc nhỏ là sử dụng các yếu tố phụ nhấn mạnh mục đích của nút. Ví dụ, hai mũi tên chỉ xuống hoạt động tuyệt vời cho một nút tải xuống. Biểu tượng giỏ hàng hoạt động tuyệt vời với nút thêm vào giỏ hàng (ví dụ về amazon ở trên). Kính lúp hoạt động tuyệt vời với một nút tìm kiếm. Vân vân.

    Bạn cũng có thể sử dụng một số yếu tố thương hiệu. Ví dụ: những thứ như: biểu tượng RSS tiêu chuẩn với nút đăng ký nguồn cấp dữ liệu, biểu tượng chim có nút theo dõi trên twitter, một con cáo màu cam với nút tải xuống firefox, logo của riêng bạn với nút mua nút công cụ.

    Dưới đây là một số ví dụ:

    Thức tỉnh

    Thương mại

    Bảo vệ

    Mở khóa.com

    Sofasurfer.eu

    Tải lên

    Sức mạnh của "Miễn phí"

    Một mẹo nữa là sử dụng từ mạnh nhất trong ngôn ngữ tiếng Anh - MIỄN PHÍ. Bất cứ khi nào một cái gì đó được quảng cáo là miễn phí, mọi người bắt đầu hành động dự đoán không hợp lý (hãy xem một cuốn sách tuyệt vời bằng cách Dan Ariely, "Mặt trái của sự bất hợp lý" để tìm hiểu ý tôi là gì.)

    Ví dụ khác:

    Sách mới

    Wufoo

    Freeagent.com

    Cái gì tiếp theo?

    Nếu bạn thành thạo Photoshop hoặc phần mềm tương tự khác, bạn có thể tiếp tục và tạo một nút đẹp ngay bây giờ. Một cách khác là trở thành chủ sở hữu may mắn của bất kỳ chủ đề WordPress nào bởi ThemeFuse, như tôi đã đề cập trước đó trong bài đăng này.

    Lời khuyên của bạn về việc thiết kế một nút mua tuyệt vời là gì? Tôi muốn cập nhật bài viết này với ý kiến ​​của bạn.