Vị trí tối ưu cho nút Call to Action (CTA) trên Mobile

Chắc hẳn bạn đã biết được tầm quan trọng của nút kêu gọi hành động trong thiết kế phải không nào? Không chỉ đơn thuần là nút đâu nhé, mà chúng là yếu tố thiết yếu tương tác với người dùng. Thế nên để tối ưu hóa thời gian thao tác, bạn nên đặt các nút của mình nơi người dùng mong muốn tìm thấy chúng.

Hãy cùng phân tích toàn diện về tất cả các vị trí nút bạn có thể sử dụng. Tìm hiểu vị trí nút nào là vị trí tối ưu cho ứng dụng của bạn để người dùng không lãng phí thời gian nhé!

Nguyên tắc Gutenberg


Trước khi người dùng có thể thực hiện hành động, họ thường nhìn một lượt qua màn hình. Nội dung màn hình cho biết quyết định của họ về hành động nào cần thực hiện. Ngay sau khi họ quét xong, lời kêu gọi hành động sẽ tự hiện ra. Bạn nghĩ là đôi mắt của họ sẽ dừng lại ở đâu?

Hóa ra họ bắt đầu ở góc trên bên trái và kết thúc ở góc dưới bên phải, di chuyển mắt theo hình zig-zag. Nhà thiết kế báo nổi tiếng Edmund Arnold đã gọi mô hình quét tự nhiên này là Nguyên tắc Gutenberg.

Nguyên lý này minh họa cách mắt di chuyển từ trái sang phải dọc theo trục định hướng cho đến khi nó chạm vào góc dưới bên phải. Nó tạo thành một đường quét nổi bật gọi là đọc trọng lực. Các yếu tố thiết kế nằm dọc theo đường chéo được chú ý nhất.

Vị trí đặt nút tối ưu nên tuân theo Nguyên tắc Gutenberg. Bạn nên đặt các nút của mình ở cuối đường dẫn quét của người dùng khi họ đã sẵn sàng hành động. Có rất ít trường hợp người dùng sẵn sàng hành động trước khi quét, nhưng đây chỉ là khi họ đã quen với nội dung màn hình.

Trên cùng & dưới cùng

Vị trí đầu tiên để quyết định là đặt nút CTA của bạn ở trên cùng hoặc dưới cùng của màn hình. Vị trí nút nào tuân theo Nguyên tắc Gutenberg?

Hầu hết người dùng bắt đầu bằng cách quét nội dung trước vì nó liên quan đến nhiệm vụ của họ và làm chủ màn hình. Mắt họ di chuyển từ nửa trên của màn hình xuống phía dưới. Khi nội dung kết thúc, họ sẽ tìm kiếm lời kêu gọi hành động.

Mắt họ vẫn ở phía dưới khi họ tìm kiếm một nút CTA cho đến khi họ có thể tìm thấy chúng.

Đặt nút gọi hành động ở trên cùng khiến người dùng bối rối vì họ sẽ thấy nó sau khi quét xong nội dung. Nó đi ngược lại luồng quét tự nhiên của người dùng.

Không chỉ vậy, một nút trên cùng cũng nhỏ hơn nút dưới cùng vì nó phải chia sẻ không gian với tiêu đề màn hình. Kích thước nhỏ kết hợp với vị trí khó xử, khiến các nút trên cùng khó tìm hơn và mất thời gian để nhấn hơn.

Khi bạn đặt nút gọi hành động ở phía dưới, người dùng có thể truy cập nhanh hơn. Họ sẽ thấy nút ngay sau khi quét nội dung mà không đảo mắt quá nhiều. Một nút dưới cùng không chỉ phù hợp với Nguyên tắc Gutenberg, mà nó còn lớn hơn và dễ dàng tiếp cận hơn.

Lựa chọn vật phẩm

Vị trí đặt nút trên cùng sẽ có ý nghĩa khi người dùng chọn một mục trên màn hình. Ví dụ: khi người dùng chọn một hàng của bảng, thanh ứng dụng sẽ thay đổi và cung cấp các hành động liên quan cho mục đã chọn. Tiêu đề màn hình biến mất và số lượng các mục được chọn xuất hiện.

Các nút trên cùng cũng áp dụng để chọn nội dung hình ảnh. Sử dụng các nút trên cùng trong ngữ cảnh này cho phép người dùng thực hiện hành động nhanh hơn sau khi họ nhận thấy sự thay đổi trạng thái trong thanh ứng dụng. Lúc này đặt các nút CTA gần với tiêu đề trạng thái sẽ dễ nhận thấy hơn.


Nút ngang

Có một vài cách bạn có thể sắp xếp các nút ở phía dưới. Một cách là sắp xếp chúng cạnh nhau theo chiều ngang. Sự sắp xếp này là lý tưởng khi bạn muốn nhấn mạnh mối quan hệ giữa hai hành động khác nhau. Nó khiến người dùng xem chúng như một bộ và xem xét ngang nhau cho cả hai.

Trong ví dụ, ứng dụng sử dụng các nút nằm ngang để đảm bảo người dùng biết họ có thể chỉnh sửa thiết kế của đôi giày trước khi mua. Vị trí cạnh nhau củng cố mối quan hệ giữa cả hai hành động.

Vì mua giày và chỉnh sửa thiết kế đều quan trọng như nhau đối với sự hài lòng của khách hàng, họ đã kết hợp với nhau như anh em ruột thịt. Bằng cách này, người dùng đã thắng bỏ qua nút Thiết kế Chỉnh sửa nếu họ đang vội vàng mua.

Hành động chính bên phải & bên trái

Bạn có thể chọn hành động chính của mình ở bên trái hoặc bên phải cho các nút ngang. Nhưng vị trí nào cho phép người dùng hành động nhanh hơn?

Khi hành động chính ở bên trái, nó chống lại việc đọc trọng lực. Mắt người dùng muốn di chuyển về phía dưới bên phải, nhưng trọng lượng hình ảnh của nút CTA giữ cho chúng cố định ở phía dưới bên trái. Sau đó, họ di chuyển xuống phía dưới bên phải, rồi mới trở lại bên trái để nhấn vào nút chính. Do đó, mắt người dùng sẽ phải quét qua lại quét, tăng thời gian tác vụ của người dùng.

Khi hành động chính ở bên phải, kết quả là hoàn thành nhiệm vụ nhanh hơn vì nút là nơi kết thúc việc đọc trọng lực. Người dùng don lồng phải đảo ngược luồng quét của họ hoặc sửa lỗi trên hành động chính nhiều lần.

Nút dọc

Một cách khác bạn có thể sắp xếp các nút của mình là xếp chúng theo chiều dọc. Sự sắp xếp này là lý tưởng nếu bạn muốn người dùng tập trung vào từng hành động riêng biệt. Bạn sẽ nhận được chúng để cố định lâu hơn trên mỗi nút để xem xét cẩn thận hơn.

Các nút dọc nổi bật hơn các nút ngang vì chúng có nhiều không gian hơn để trải rộng chiều rộng của màn hình. Kích thước lớn hơn không chỉ giúp các nút bấm dễ dàng hơn mà còn cho hành động chính dễ nhìn thấy nhất.

Trong ví dụ này, hành động chính là nút Thêm vào giỏ hàng, điều này quan trọng hơn nút Thông báo quà tặng của Thêm Thêm. Sắp xếp nó như một nút dọc làm nổi bật nó, vì vậy hành động thứ cấp không phải là cạnh tranh.

Top Vs. Hành động cơ bản dưới cùng

Hành động chính nên đi trên hay dưới? Nguyên lý Gutenberg ra lệnh rằng việc đọc trọng lực chảy theo hướng đi xuống. Nút dưới cùng cho phép người dùng truy cập nhanh hơn bằng cách chỉ quét xuống. Khi nó ở trên đỉnh, người dùng phải quét xuống dưới và sau đó hướng lên trên để chạm vào nó.

Nút lai

Sự sắp xếp nút cuối cùng là sự kết hợp của các nút ngang và dọc. Sử dụng phương pháp này nếu bạn có ít nhất ba nút.

Ba nút khiến người dùng mất nhiều thời gian hơn để quyết định vì có nhiều thông tin cần xử lý. Nhưng sự sắp xếp này cắt giảm thời gian quyết định của họ với hệ thống phân cấp trực quan của nó. Thay vì dựa vào nhãn mỗi lần, người dùng có thể nhớ lại từng hành động bằng cách nhìn vào nút Kích thước và tín hiệu định hướng.

Trong ví dụ, hành động chính là nút màu xanh lá cây lớn. Nó dễ dàng nhận ra vì không có nút nào khác có cùng kích thước hoặc màu sắc. Sau đó, người dùng có thể liên kết một hành động là nút ngoài cùng bên trái và hành động khác là nút ngoài cùng bên phải.

Người dùng càng thường xuyên chạm vào các nút, họ sẽ biết hành động nào là kích thước và hướng của nó. Chẳng mấy chốc, họ sẽ phát triển một thói quen giúp họ hành động mà không cần suy nghĩ.

Hành động chính ở phía dưới

Đọc trọng lực ra lệnh rằng hành động chính đi ở phía dưới và hành động thứ cấp đi phía trên nó. Nút ưu tiên cao hơn cần được chú ý nhiều nhất và sẽ đi vào cuối luồng quét của người dùng.

Các hành động thứ cấp không nên có màu sắc riêng biệt, hoặc nó sẽ cạnh tranh với hành động chính. Thay vào đó, cả hai nên có một màu trung tính với kiểu nút được tô đậm hoặc sáng.

Bạn không cần phải căn chỉnh chúng với nút dọc. Căn chỉnh chúng bù với các cạnh dọc nhấn mạnh hướng trái và phải của chúng.

Nút dính

Một kỹ thuật để làm cho lời kêu gọi hành động hiển thị cho người dùng mọi lúc là sử dụng các nút dính. Các nút được giữ cố định ở dưới cùng của màn hình, cho phép người dùng thực hiện hành động bất cứ nơi nào họ cuộn.

Sử dụng các nút dính này để ưu tiên cho các ứng dụng gốc, nhưng tránh chúng cho các ứng dụng web dựa trên trình duyệt. Các nút dính trên ứng dụng web gây ra sự cố khai thác do thanh trình duyệt bật lên khi người dùng nhắm mục tiêu vào nút.

Có cách giải quyết cho vấn đề này, nhưng chúng phức tạp. Giải pháp tự nhiên nhất là thêm phần đệm thêm giữa nút và thanh trình duyệt.

Đi với dòng chảy

Nút gọi hành động là người dùng Bước cuối cùng để thành công. Nơi bạn đặt nó có thể làm cho nhiệm vụ của họ nhanh hơn hoặc chậm hơn. Làm cho nó dễ dàng để có được bằng cách đặt nó phù hợp với Nguyên tắc Gutenberg. Khi bạn thực hiện, nút kêu gọi hành động của bạn sẽ có một vị trí tối ưu đi cùng với luồng.

Art School

Maecenas finibus, neque ac ullamcorper ornare, eros augue posuere risus, suscipit fringilla. ex erat. eu felis. Sed id arcu accumsan, iaculis risus eu, pharetra tortor tincidunt quam. Vivamus non imperdiet lectus, et pretium ligula. Sed id arcu accumsan, iaculis risus eu, tincidunt quam.Tow White, DesignerCondimentum mi dolor, vel rutrum nulla lobortis vel nec etiam mauris sem, pretium at lorem bibendum eget, suscipit nec nec felis ut id perdiet leo sed nec tellus vitae lectus scelerisque aliquet estibulum tincidunt lectus in eros porta tempus lorem vestibulum lerisque mattis morbi varius elit at ex euismod hendrerit aenean id varius urna, euismod pulvinar a sed diam. Curabitur pharetra tortor a ligula aliquet congue. Maecenas lacinia massa consectetur mi dolor, vel rutrum nulla lobortis vel etiam mauris sem, pretium at bibendum eget, suscipit nec nec felis ut id perdiet leo sed nec tellus vitae lectus scelerisque aliquet. Vestibulum tincidunt lectus in eros porta tempus lorem vestibulum scelerisque mattis morbi varius elit at. ex euismod hendrerit aenean id varius urna, euismod pulvinar a sed diam. Curabitur pharetra tortor a ligula aliquet congue. Maecenas lacinia massa consectetur orci rhoncus, quis ornare tellus placerat. Aliquam sollicitudin vestibulum scelerisque. In at accumsan urna. Proin nec lectus euismod, blandit nibh a, vulputate neque. Praesent pellentesque sapien a lorem consequat, ut viverra nibh venenatis. Maecenas finibus, neque ac ullamcorper ornare, eros augue posuere risus, suscipit fringilla. ex erat. eu felis. Sed id arcu accumsan, iaculis risus eu, tincidunt quam. Vivamus non imperdiet lectus, et pretium ligula. Phasellus elementum tellus vel purus pulvinar, et lacinia est semper Fusce nec leo at urna tristique imperdiet id id erat. Vel rutrum nulla lobortis vel etiam mauris sem, pretium at bibendum eget suscipit nec nec felis ut id perdiet leo sed nec tellus vitae lectus eget scelerisque aliquet. Vestibulum tincidunt lectus in eros porta tempus lorem vestibulum scelerisque mattis morbi varius elit at. ex euismod hendrerit aenean id varius urna, euismod pulvinar a sed diam. Curabitur pharetra tortor a ligula aliquet congue. Maecenas lacinia massa consectetur orci rhoncus, quis ornare tellus placerat. Aliquam sollicitudin vestibulum scelerisque in at accumsan urna. Proin nec lectus euismod, blandit nibh a, vulputate neque. Praesent pellentesque sapien a lorem consequat, ut viverra nibh venenatis maecenas finibus neque.

We Love What We Do

Maecenas finibus, neque ac ullamcorper ornare, eros augue posuere risus, suscipit fringilla. ex erat. eu felis. Sed id arcu accumsan, iaculis risus eu, pharetra tortor tincidunt quam. Vivamus non imperdiet lectus, et pretium ligula. Sed id arcu accumsan, iaculis risus eu, tincidunt quam.Tow White, DesignerCondimentum mi dolor, vel rutrum nulla lobortis vel nec etiam mauris sem, pretium at lorem bibendum eget, suscipit nec nec felis ut id perdiet leo sed nec tellus vitae lectus scelerisque aliquet estibulum tincidunt lectus in eros porta tempus lorem vestibulum lerisque mattis morbi varius elit at ex euismod hendrerit aenean id varius urna, euismod pulvinar a sed diam. Curabitur pharetra tortor a ligula aliquet congue. Maecenas lacinia massa consectetur mi dolor, vel rutrum nulla lobortis vel etiam mauris sem, pretium at bibendum eget, suscipit nec nec felis ut id perdiet leo sed nec tellus vitae lectus scelerisque aliquet. Vestibulum tincidunt lectus in eros porta tempus lorem vestibulum scelerisque mattis morbi varius elit at. ex euismod hendrerit aenean id varius urna, euismod pulvinar a sed diam. Curabitur pharetra tortor a ligula aliquet congue. Maecenas lacinia massa consectetur orci rhoncus, quis ornare tellus placerat. Aliquam sollicitudin vestibulum scelerisque. In at accumsan urna. Proin nec lectus euismod, blandit nibh a, vulputate neque. Praesent pellentesque sapien a lorem consequat, ut viverra nibh venenatis. Maecenas finibus, neque ac ullamcorper ornare, eros augue posuere risus, suscipit fringilla. ex erat. eu felis. Sed id arcu accumsan, iaculis risus eu, tincidunt quam. Vivamus non imperdiet lectus, et pretium ligula. Phasellus elementum tellus vel purus pulvinar, et lacinia est semper Fusce nec leo at urna tristique imperdiet id id erat. Vel rutrum nulla lobortis vel etiam mauris sem, pretium at bibendum eget suscipit nec nec felis ut id perdiet leo sed nec tellus vitae lectus eget scelerisque aliquet. Vestibulum tincidunt lectus in eros porta tempus lorem vestibulum scelerisque mattis morbi varius elit at. ex euismod hendrerit aenean id varius urna, euismod pulvinar a sed diam. Curabitur pharetra tortor a ligula aliquet congue. Maecenas lacinia massa consectetur orci rhoncus, quis ornare tellus placerat. Aliquam sollicitudin vestibulum scelerisque in at accumsan urna. Proin nec lectus euismod, blandit nibh a, vulputate neque. Praesent pellentesque sapien a lorem consequat, ut viverra nibh venenatis. Maecenas finibus, neque ac ullamcorper.

Entry with Post Format “Video”

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

 

Read more