Thiết kế Call-to-action như thế nào?

Posted on: August 19th, 2015 - By: - No Comments - Viewed: 3118
 

Thiết kế là trong các chi tiết.

Chỉ cần một chút thay đổi nhỏ nhất về đường nét hay màu sắc cũng có thể tạo ra sự khác biệt giữa một thiết kế và một thiết kế tuyệt vời. Điều này có thể đặc biệt đúng đối với thiết kế web. Trong khi chúng ta có thể có xu hướng tập trung vào các tiêu đề, ảnh lớn hoặc kiểu chữ trong thiết kế. Có những người dành nhiều thời gian nghiên cứu và thử nghiệm cách người dùng tương tác với các trang web – nơi mà đôi mắt của người dùng nhìn đầu tiên, những nơi họ click vào, bao nhiêu thời gian họ dành trên trang nhất định.

Và nếu bạn có một trang web mà bạn đang cố gắng để có được khách truy cập để chú ý , mua một sản phẩm hoặc đăng ký một bản tin. Đây là khi các thiết kế của các chi tiết như nút call-to-action nút (nút kêu gọi hành động, click, những câu như “Mua ngay” hoặc “Đăng ký”) có thể có một ảnh hưởng đáng kể trên trang web của bạn. Một thiết kế nút call-to-action tốt sẽ giúp tặng lượt chuyển đổi khách truy cập thành khách hàng của bạn lên cao.

Vì vậy, làm thế nào bạn có thể thiết kế một nút gọi hành động hiệu quả, lôi kéo người truy cập? Chúng ta hãy xem xét một số mẹo và thủ thuật, cùng với các ví dụ từ khắp nơi trên web:

thiet-ke-call-to-ac-tion-button- (5)

Làm thế nào để thiết kế một nút Call-to-Action

1. Kích thước

Dễ dàng để tìm thấy ở cái nhìn đầu tiên. Làm nút đủ lớn để thu hút sự chú ý (tương ứng với các yếu tố khác trên trang), nhưng không quá lớn để có thể làm cho bố trí trang trông không cân bằn. Bạn có thể cân bằng kích thước của các nút với các đặc tính khác như hình dạng và màu sắc để tối ưu hóa khả năng hiển thị.

thiet-ke-call-to-ac-tion-button- (1)

Bạn không chắc chắn về kích thước nút của bạn? Hãy thử một mẹo nhỏ  – quay đi một lúc và quay nhìn lại màn hình máy tính của bạn, nheo mắt nhìn lại trang web – vậy tất cả các chi tiết mờ và bạn chỉ nhìn thấy hình dạng chung; nếu nút vẫn nổi bật lên, thì nó đang trong một hình dạng tốt.

2. Màu sắc

Theo Ott Niggulis tại ConversionXL, màu sắc vẫn là một lựa chọn quan trọng. Màu sắc khác nhau sẽ tạo ra các phản ứng tâm lý mạnh mẽ, ngoài việc đảm bảo sự lựa chọn của bạn hài hòa với bất kỳ màu sắc hiện tại bạn có cho trang web của bạn.

Màu sắc này có thể chọn bằng cách ghép nối một nút màu xanh lá cây chanh với sắc đỏ cam. Các màu đối lập như đỏ / xanh lá cây, xanh dương / cam, có tác động trực quan cao và chắc chắn sẽ thu hút sự chú ý.

thiet-ke-call-to-ac-tion-button- (2)

Màu sắc cũng có thể được cân bằng với kích thước để tăng cường khả năng hiển thị. Ví dụ, một nút lớn (đã được dễ dàng hơn để xem vì kích thước của nó) cùng với màu sắc tươi sáng; hãy đổ bóng một cách tinh tế để hài hoà hơn. Mặt khác, một nút nhỏ hơn được tạo bóng cũng thêm phần trực quan hơn.

3. Tạo hiệu ứng

Nút Call – to – action có thể thất bại khi người truy cập có thể không nhận ra rằng có thể nhấp chuột vào nó. Vì vậy, điều quan trọng là Button của bạn phải trông thực sự “click được”. Những hình dạng cơ bản như hình chữ nhật góc nhọn hay được bo tròn là sự lựa chọn truyền thống. Nếu bạn chọn những hình dạng khác nhau bạn phải làm cho nó trực quan rõ ràng rằng…đây là một nút có thể click, một số tuỳ chọn hiệu quả như đổ bóng, nổi bật, làm hiệu ứng 3D,…

thiet-ke-call-to-ac-tion-button- (3)

4. Xem xét sự tương phản

Đối với một nút gọi hành động, bạn sẽ muốn suy nghĩ về nó theo hai cách:

– Màu Button và màu nền: Nếu màu sắc của các nút pha trộn với màu nền của trang web, nút call-to-action của bạn có thể được bỏ qua. Màu sắc Button của bạn đủ để nổi bật trên nền web và các yếu tố còn lại.

Trong ví dụ dưới đây, không chỉ tạo sự tương phản màu xanh đậm độc đáo với nền màu vàng, mà ở nút thứ hai (một sự lựa chọn khác) cũng đã được thiết kế màu sắc ít nhìn thấy với một màu vàng tương tự như màu nền, một lựa chọn kém hấp dẫn, một chút thông minh của người thiết kế.

thiet-ke-call-to-ac-tion-button- (4)

– Màu chữ và Màu Button: Bạn không muốn người dùng căng thẳng để đọc dòng chữ trên nút của bạn? Bên cạnh việc chọn một font chữ dễ đọc ở một kích thước đủ lớn, việc lựa chọn một màu sắc phù hợp cho các văn bản sẽ giúp tăng cường khả năng đọc. Bạn tránh những màu sắc quá giống nhau hay khó đọc khi dùng chung với nhau (ví dụ, văn bản màu trắng với một nút màu vàng). Trắng đi cùng gam màu sẫm và màu xanh đen là lựa chọn an toàn.

5. Chọn một vị trí tốt

Sau khi bạn đã thiết kế Button của bạn, “đóng đinh” xuống vị trí của nó trong thiết kế trang tổng thể là bước cuối cùng. Quyết định trên một vị trí nổi bật sẽ phụ thuộc chủ yếu vào cách bố trí trang cụ thể của bạn.

Bạn có thể áp dụng cho trang web của bạn bằng cách đặt Button của bạn trong khu vực mà người truy cập nhìn thấy đầu tiên mà không cần phải di chuyển xuống. Đó thường nằm đầu của trang hoặc trên khu vực không cần phải kéo chuột. Bất cứ nơi nào bạn đặt nút của bạn, xung quanh Button phải có không gian trống – không đặt Button quá gần với các yếu tố khác – sẽ giúp thu hút sự chú ý tới các Button và cho nó nổi bật hình ảnh.

thiet-ke-call-to-ac-tion-button- (1)

 

Tags: , ,

Follow me with facebook