1 nút bên nổi wordpress. Cài đặt tiện ích nâng cao. Thiết lập thuật toán làm việc. Cài đặt trên CMS Joomla

Chúc một ngày tốt lành cho tất cả. Hôm nay chúng ta sẽ nói về các cửa sổ phương thức và sử dụng ví dụ của chúng, chúng ta sẽ triển khai “ Yêu cầu gọi lại". Bạn có thể đã thấy một nút như vậy trên nhiều trang đích; khi bạn nhấp vào nút đó, một biểu mẫu liên hệ sẽ xuất hiện với nền tổng thể tối đi. Đây chính xác là chức năng mà chúng tôi đang triển khai ngày hôm nay.

Thông thường nút “yêu cầu gọi lại” nằm ở bên phải góc trên cùng. Bạn có thể thử nghiệm vị trí nhưng hãy nhớ rằng mọi người đã quen với việc nhìn thấy yếu tố này ở đó, mặc dù điều này áp dụng nhiều hơn cho các trang web kinh doanh và dịch vụ.

Tất nhiên, trong hầu hết các trường hợp, cửa sổ phương thức được tạo bằng javascript, nhưng hôm nay chúng tôi sẽ cố gắng chỉ sử dụng sử dụng css và chúng tôi sẽ không tải trang đích kịch bản bổ sung.

Và cuối cùng, tôi sẽ nói rằng tôi không bận tâm đến việc thiết kế biểu mẫu liên hệ, tôi chỉ muốn truyền đạt bản chất của cách thực hiện một hiệu ứng như vậy, vì vậy vui lòng đừng quá cố gắng. Tôi sẽ chỉ mô tả những điểm chính và sau đó bạn có thể sửa chúng theo ý muốn.

Về cách thiết lập Mâu liên hệ Bạn có thể đọc những bài viết này:

Để đảm bảo bài viết không quá dài, tôi sẽ chỉ cung cấp phần đánh dấu html và bạn có thể xem phần còn lại bằng cách tải xuống nguồn.

Chúng tôi sẽ triển khai chức năng này: :)

Một lần nữa, đây chỉ là một mẫu nhỏ mà bạn có thể điều chỉnh cho phù hợp với thiết kế của mình. Tất cả điều này sẽ được gọi bằng cách nhấn một nút.

Điều đầu tiên cần làm là đưa style sheet (ít hơn) được cung cấp vào nguồn. Tôi đã mô tả nó rất chi tiết kèm theo các nhận xét, hãy xem và chỉnh sửa.

Cấu trúc HTML rất đơn giản. Chúng tôi đặt liên kết này ở đúng nơi trên trang web. Nơi bạn định hiển thị nút “yêu cầu gọi lại”:

Yêu cầu gọi lại

Bây giờ bạn cần tạo một vùng chứa cửa sổ phương thức:

Tôi chưa xuất bản style sheet, bạn có thể tải nguồn tại đây:

Và với đánh dấu html- Tất cả. Vì vậy, nó đơn giản. Ưu điểm của phương pháp này là cửa sổ phương thức có thể được gọi nhiều lần trên một trang và không sử dụng tập lệnh.

Như bạn có thể nhận thấy, tôi đã viết rằng tôi sử dụng ít hơn. Nhìn vào cấu trúc. Tôi chưa sử dụng dù chỉ 5% khả năng của bộ tiền xử lý (chỉ lồng nhau), vì tôi mới bắt đầu tìm hiểu nó, nhưng tôi dự định sẽ sử dụng nó thường xuyên hơn trong tương lai. Tôi muốn hỏi bạn điều gì là tốt nhất. Bạn có phiền nếu các ví dụ về mã không có trong CSS mà ở dạng ít hơn không? tôi có Google Chrome và trình duyệt Yandex từ chối biên dịch less thành css mà không mở tệp thông qua Denver hoặc OpenServer. Trên Mazil và IE - bị nuốt chửng. Vì vậy, rất có thể tôi sẽ đăng các kiểu CSS thông thường.

Và đó là tất cả cho ngày hôm nay! Tạm biệt mọi người!

Nếu bạn không muốn tự mình tạo một nút như vậy, tôi khuyên bạn nên chú ý đến nút này cho phép bạn triển khai chức năng này và có nhiều tính năng bổ sung khác.

là một trợ lý nhẹ, thanh lịch, năng động, nhanh chóng và hiệu quả nhằm hỗ trợ điều hướng cơ bản và thu hút người dùng. Chỉ là một phần tử tròn nhỏ di chuyển theo người dùng, nổi độc lập trên toàn bộ cấu trúc thiết kế và nói chung là bám chặt vào bên phải, nó có thể mở rộng chức năng của từng màn hình cũng như làm cho chương trình trở nên thuận tiện hơn.

Theo thông số kỹ thuật của Google đề xuất, nút này phải có ý nghĩa và cung cấp quyền truy cập nhanh vào các công cụ quan trọng. Yếu tố này phải đơn giản và đẹp mắt, chứa đồ họa trực quan và rõ ràng, sống động và thiết kế sáng sủa, nhưng đồng thời tránh các chức năng phá hoại. Chúng tôi đã tập hợp một bộ sưu tập nhỏ các khái niệm giao diện người dùng di động mới mẻ đã đón đầu xu hướng mới này.

Thiết kế lại tài liệu Instagram

Thiết kế này có một nút tròn nhỏ có bóng tinh tế, được tô màu xanh đậm phù hợp. Nó cung cấp quyền truy cập nhanh vào ảnh và cũng cung cấp cho chủ sở hữu chức năng bổ sung. Đi kèm với hầu hết các màn hình.

Hệ sinh thái ứng dụng Android & Wear

Nhà thiết kế Stefan Castro sử dụng nút nổi hình tròn, nhờ tông màu đỏ nên tương phản rõ rệt với nội dung. Nó mở ra năm biểu tượng nhỏ có đầu, cũng có màu sắc tươi sáng, nằm từ dưới lên trên.

Magnet.me

Kỹ thuật tương tự được sử dụng ở đây như trong ví dụ trước. Đầu tiên, nó chỉ là một nút tròn thông thường nằm ở cuối trang. Khi người dùng nhấn vào, nó sẽ hiển thị mượt mà ba biểu tượng khác, lần lượt được đặt theo chiều dọc.

Giao diện người dùng tô màu

Nhà thiết kế Lois Yang trình diễn Bạn đã làm rất tốt tùy ý bảng màu cho phần tử này. Giao diện trang web khá nặng về nội dung. Nền màu đỏ tươi sáng kết hợp với các bóng mờ tinh tế tách biểu tượng khỏi luồng thông tin, thu hút sự chú ý một cách tinh tế.

Chảy dãi của Henrique Ferreira

Ở đây, nút nổi được hỗ trợ bởi lớp phủ màn hình mờ trang nhã. Màn hình là cần thiết để thu hút sự chú ý đến các biểu tượng và tiêu đề vì nền của ứng dụng chứa đầy các hình ảnh lớn và hấp dẫn. Một sai lệch nhỏ so với quỹ đạo sẽ làm tăng thêm sự tinh tế cho thiết kế.

Nút Thêm phương tiện nổi

Nút hành động hình chữ O hiện diện ở cuối trang và bao gồm bốn CTA được sắp xếp thành vòng tròn. Bởi vì điều này, chúng nhanh chóng có sẵn. Mỗi biểu tượng có kích thước tương đối lớn, màu sắc tươi sáng, biểu tượng sắc nét, rõ ràng.

Giao diện người dùng hàng ngày 010

Ở đây, nút được kết nối với một thanh bên lớn chạy ra từ phía bên phải và dịch chuyển nội dung sang bên trái một chút. Có quan hệ với truyền thông xã hội, nó bao gồm tất cả các cổng phổ biến: Pinterest, Twitter, Facebook, Google, v.v.

Ứng dụng Alex Ryabushko

Nút hành động và CTA của nó được thiết kế một cách tuyệt vời phong cách phẳng và trong một màu. Tuy nhiên, trạng thái di chuột đang ở trạng thái vui vẻ màu cam mặc định thay đổi thành màu xanh. Các ký tự khổng lồ bên trong các vòng tròn rất trực quan và dễ đọc. Phần tử này cung cấp cho người dùng các tín hiệu trực quan để nhanh chóng đạt được mục tiêu.

Mẫu PSD ứng dụng thiết kế vật liệu (của Daniel De Santis)

Giao diện người dùng được tạo trong truyền thống tốt nhất thông số kỹ thuật hiện hành của Google. Cuộc gọi nút nổi cổ điển bảng lớn, chiếm gần như toàn bộ màn hình và bao gồm các hành động cần thiết để hoạt động trong phần Hộp thư đến.

Giao diện người dùng di động (bởi Smiley)

Nghệ sĩ thể hiện nhiều khái niệm màn hình chức năng. Như bạn có thể thấy, hầu hết mọi trang đều có nút hành động riêng. Cái sau gây ra một tác động nhỏ nhưng đủ bảng cao, ở bên trái và chiếm khoảng mười lăm phần trăm không gian.

Nút hành động nổi của Tyler Berry

Tùy chọn này khác với hầu hết các ví dụ được liệt kê trong bộ sưu tập của chúng tôi. Chúng không chỉ có màu sắc phong phú và bóng tuyệt vời mà còn hiển thị các biểu tượng thành một dòng ở đầu giao diện.

Nút hành động nổi của Giulio “bart172” Smedile

Mặc dù hầu hết các nút trong thiết kế này đều tương tự như các nút khác nhưng chúng được kết nối với bàn phím sterling. Tác giả nhận lợi nhuận tối đa từ người trợ giúp nổi nhỏ bé này. Nó cũng cung cấp một hiệu ứng chuyển tiếp suôn sẻ giữa hai trạng thái.

Khám phá UX

Trong thiết kế này, một nút nổi hiển thị một tập hợp các CTA được sắp xếp thành một hàng. Điều này chiếm toàn bộ phần dưới cùng của màn hình. Công việc sơn hai tông màu, các bức vẽ đơn sắc đồng nhất, các hình tượng và bóng tối hoàn hảo đến từng pixel tạo nên một thẩm mỹ tuyệt vời.

Giao diện người dùng ngón tay cái (bởi Jochem van der Veer)

Ý tưởng đằng sau thiết kế này là sử dụng nút hành động nổi, tương tự như hầu hết các nút khác. Nó dính vào phía bên phải, có vẻ ngoài đơn giản và ngay lập tức bắt mắt. Trong một số trường hợp, nút này đi đôi với phiên bản thu nhỏ của logo.

Nút ma thuật nổi

Các nút nổi này được tối giản về mặt chức năng. Chúng chỉ được sử dụng để cung cấp cho người dùng truy cập nhanhđến không gian làm việc nơi bạn có thể tạo sách của mình. Thiết kế tuân thủ các tiêu chuẩn và phù hợp với tâm trạng của ứng dụng.

theScore Android

Nút CTA ở đây trông sang trọng, tinh tế và tinh tế. Phong cách tuyến tính kết hợp với cách phối màu hai tông màu đẹp mắt trong đó màu xanh lam chiếm ưu thế tạo nên tính thẩm mỹ nổi bật đồng thời biến hành động thành điểm nhấn.

FAB cho sự tương tác của người dùng

Nhà phát triển sử dụng nút hành động, thiết kế của nút này tạo tiếng vang nhẹ nhàng bảng trên cùng dẫn đường. Nó nhằm mục đích thu hút người dùng và giúp họ cảm thấy thoải mái với toàn bộ dự án. Nút này chồng lên cửa sổ bật lên ở góc dưới bên phải và chiếm toàn bộ màn hình.

chăm sóc thay thế

Tác giả của thiết kế này ẩn các bộ lọc dưới nút hành động nổi, cho phép người dùng sắp xếp thông tin dư thừa và đạt được mục tiêu của mình trong vòng vài giây. Với vẻ ngoài táo bạo và màu sắc tươi sáng, nút này không xung đột với nội dung và ngay lập tức thu hút sự chú ý của bạn.

Ứng dụng Swipii

Khái niệm Ứng dụng Swipii dựa trên một số giải pháp mới. Nút nổi là một trong số đó. Nó phục vụ tốt mục đích của nó, làm cho cuộc sống của người dùng dễ dàng hơn. Nút này nằm ở góc của mỗi trang và hiển thị một trang bật lên có mã QR.

Nút hành động trôi chảy của nhà thiết kế Shu Makino

Thiết kế này ngắn GIF động thể hiện quy trình làm việc tiêu chuẩn của nút hành động nổi. Anh ấy mạnh mẽ với chuyển tiếp suôn sẻ và bao gồm bảy phần tử có hình dáng trang nhã lần lượt xuất hiện và bám chặt vào phía bên phải.

Tóm lại là…

Các nút hành động nổi có thể dễ dàng trở thành các thành phần UI thiết yếu. Đây là một cách thanh lịch và khá đơn giản để cải thiện nó. Cung cấp cho người dùng quyền truy cập nhanh vào các thông tin quan trọng chức năng quan trọng ứng dụng di động, họ đi thẳng vào vấn đề và có thể giúp việc sử dụng ứng dụng trở nên nhanh chóng, hiệu quả và năng suất.

Material Design là một ngôn ngữ thiết kế được giới thiệu năm của Google trước đây, đại diện cho nỗ lực táo bạo của công ty nhằm tạo ra một hệ thống thống nhất Kinh nghiệm người dùng trên mọi thiết bị và nền tảng. Điều này được đánh dấu bằng màu đậm, cách sử dụng bóng tự do nhưng có nguyên tắc để biểu thị các lớp giao diện người dùng và hoạt hình mượt mà, cung cấp khá kinh nghiệm tốt tương tác trong Android (và một số ứng dụng Google trên iOS).

Tuy nhiên, có một điều về Material Design đã làm tôi khó chịu kể từ khi nó được giới thiệu vào năm ngoái: nút hành động nổi.

FAB (Nút hành động nổi), theo Google, là các nút tròn nổi phía trên giao diện người dùng và “được sử dụng để thúc đẩy hành động”. Chúng hoạt động như các nút kêu gọi hành động được thiết kế để thực hiện hành động mà người dùng thực hiện thường xuyên nhất trên màn hình đó.

Và vì phong cách hình ảnh táo bạo của Material Design, FAB khá khó để bỏ qua—và vấn đề nằm ở đó. Trong khi thực hành, ở điều kiện lý tưởng FAB dường như cung cấp UX tốt - việc lạm dụng FAB sẽ gây bất lợi cho UX tổng thể của ứng dụng. Dưới đây là một số lý do cho việc này.

Sự đắm chìm đến từ kinh nghiệm

FAB nổi bật về mặt trực quan — chúng thực sự nằm trên bất kỳ thành phần giao diện người dùng nào trên màn hình. Ngoài ra, việc thêm FAB sẽ tự động dẫn đến trải nghiệm người dùng kém hấp dẫn hơn, đặc biệt ảnh hưởng đến các ứng dụng (hoặc màn hình) có mục đích cung cấp trải nghiệm tương tác.

Một ví dụ là ứng dụng ảnh mới của Google.

Ứng dụng ảnh mở ra dưới dạng thư viện với nút tìm kiếm nổi. Nhưng vấn đề là khi tôi mở một ứng dụng ảnh, tôi chỉ muốn... xem ảnh của mình. Do đó, nút tìm kiếm nổi khiến người dùng mất tập trung vào việc duyệt ảnh, đây là mục đích chính của ứng dụng. Gửi bởi tìm kiếm thông minh – tính năng độc đáoẢnh ứng dụng Google. Nhưng điều này có nghĩa là anh ta cần phải được cấp FAB vĩnh viễn ở cấp độ cao nhất trong đơn đăng ký? (Tôi nghĩ không có.)
Thật kỳ lạ, Google đồng ý với tôi. Trên trang Thiết kế Vật liệu trên FAB, Google giải thích rằng "không phải màn hình nào cũng cần nút lệnh nổi".
Và sau đó anh ấy nói thêm rằng “hành động chính là chạm vào hình ảnh trong thư viện, trong trường hợp đó không cần đến nút.

Họ nổi bật và cản đường.

Điều này có vẻ giống như mặt trái của đồng tiền, nhưng còn có điều gì đó hơn thế nữa tài sản quan trọng FAB đang cản trở tính hữu dụng của nó. Chiếm không gian trên màn hình FAB thực sự chặn nội dung.

Được rồi, FAB chỉ là một nút tròn nhỏ thôi phải không? Nó có thể chặn bao nhiêu nội dung?
Nếu nhìn vào ảnh chụp màn hình của ứng dụng ảnh, bạn sẽ nhận ra rằng FAB tìm kiếm đang chặn khoảng 50% hình ảnh thu nhỏ—chắc chắn đủ để che khuất một vài khuôn mặt. Về cơ bản, điều này tạo ra nhu cầu cuộn thêm một lần cho mỗi hình ảnh thu nhỏ thứ tư. hàng cuối cùng trên màn hình. Và đó không phải là phần tồi tệ nhất.

Người dùng Dumazy đã đăng trên Graphic Design Stack Exchange về một vấn đề mà anh ấy gặp phải khi FAB chặn ngôi sao "yêu thích" cũng như thời gian trên màn hình ứng dụng của anh ấy. Điều này minh họa sự cố xảy ra với tất cả các ứng dụng xem danh sách và nó trở nên đặc biệt rắc rối khi mục cuối cùng trong danh sách không thể cuộn lên thêm nữa. Điều này có nghĩa là toàn bộ một cột phải được loại bỏ (thay đổi vị trí của dấu hoa thị, v.v.) để cung cấp khả năng sử dụng màn hình phù hợp.

Do đó, FAB mất nhiều nhiều không gian hơn trên màn hình hơn kích thước của nó cho thấy.

Hành động tạo điều kiện có thể không được sử dụng thường xuyên.

Khi thiết kế UX, bạn cần nhớ quy tắc 80/20, quy tắc này nói rằng người dùng sẽ sử dụng 20% ​​tính năng trong 80% thời gian. Nói cách khác, phần lớn nỗ lực nên được dồn vào việc thiết kế một vài yếu tố mà người dùng sẽ sử dụng hầu hết thời gian.

FAB thực sự làm điều này - về mặt lý thuyết. Nhưng điều gì sẽ xảy ra nếu Quảng cáo hành động không được sử dụng thường xuyên?

Lấy ví dụ Ứng dụng Google Gmail.

FAB của ứng dụng Gmail là nút soạn thư giả định rằng hành động chính của người dùng là soạn email.

Nhưng nó là?

Nhiều nghiên cứu đã chỉ ra rằng ít nhất 50% email được đọc trên thiết bị di động và hầu như không có nghiên cứu nào nói như vậy về việc tạo email. Nói cách khác, như kinh nghiệm hàng ngày của chúng tôi đã xác nhận, hầu hết người dùng thiêt bị di động có xu hướng sử dụng chúng ứng dụng emailđể đọc email.

Có thể có một số người sử dụng thiết bị di động để trả lời email nhưng điều này chỉ xảy ra sau khi email được mở (lưu ý rằng điều này có nghĩa là họ sẽ bỏ qua FAB). Hành vi này của người dùng có thể là do cơ chế nhập liệu không hoàn hảo bàn phím ảo và tự động thay thế có nghĩa là hành động chính mà người dùng thực hiện là đọc (và trả lời) email chứ không phải tạo email mới.

Vậy nút “soạn email” FAB có tác dụng gì? Trong một số trường hợp hiếm hoi, người dùng sẽ rất vui khi muốn tạo một bức thư bằng ứng dụng này. Nhưng thời gian còn lại, nó chỉ chiếm không gian trên màn hình, chặn “ngôi sao” và thời gian, đồng thời liên tục gây xao lãng với màu đỏ tươi.

Chúng ta có muốn FAB không? Gạch bỏ cái trước - chúng ta có cần nó không?

Tất nhiên, không phải tất cả các hoạt động sử dụng FAB đều làm giảm trải nghiệm sử dụng ứng dụng Material. Có một số ví dụ tuyệt vời về FAB có ý nghĩa và giúp cải thiện UX của các ứng dụng này.

bản đồ Googleđây là một ví dụ tuyệt vời về việc FAB được thực hiện đúng đắn. Hành động chính mà người dùng thực hiện trên Maps là nhận chỉ đường, vì vậy việc sử dụng FAB cho mục đích này là rất thích hợp.

Nhưng hãy nhớ rằng Bản đồ khá một trường hợp đặc biệt, khi người dùng nội dung hầu như luôn quan tâm đến việc di chuyển đến giữa màn hình (nơi đặt dấu chấm màu xanh lam của bạn, đánh dấu vị trí). Tuy nhiên, trong hầu hết các ứng dụng, chế độ xem dạng lưới hoặc danh sách có nghĩa là người dùng tương tác với nội dung ở mọi nơi trên màn hình, bao gồm cả vị trí thường đặt của FAB.

Cũng xin lưu ý rằng ảnh chụp màn hình ở trên chỉ kể một phần câu chuyện: trong sử dụng thực tế, FAB vẫn giữ nguyên vị trí ngay cả khi người dùng cuộn (hầu hết thời gian). Như Google đã nhấn mạnh nhiều lần trong Material Design, thiết kế chuyển động cũng quan trọng như thiết kế giao diện người dùng.

Sự vắng mặt của chuyển động - sự nhấn mạnh vào không gian màn hình - trong bối cảnh nội dung chuyển động tạo ra nhiều cấp độ cao sự phân tâm mà ảnh chụp màn hình không thể hiển thị.

Vì vậy, vì chúng ta hầu như không có ví dụ nào về việc triển khai FAB tốt nên điều này đặt ra câu hỏi: chúng có cần thiết không?

Khi chúng ta xem xét những nhược điểm của việc sử dụng FAB trong các ứng dụng, chúng ta có thể tóm tắt nó thành hiểu biết đơn giản: Người dùng không chỉ thực hiện các hành động trong ứng dụng mà còn sử dụng nội dung.

Thiết kế FAB trong Material Design dựa trên tiền đề là người dùng dành phần lớn thời gian để làm Hành động cụ thể, và do đó nên được đưa ra trạng thái nâng cao dưới dạng một nút chính, cấp cao. Nhưng trong nhiều ứng dụng, người dùng cũng tập trung vào việc xem nội dung: trong ứng dụng ảnh, người dùng muốn xem ảnh; trong ứng dụng Người dùng Gmail muốn đọc email của họ; và trong ứng dụng Facebook, người dùng muốn đọc tin nhắn của bạn bè.

Do đó, FAB là một triết lý thiết kế (hoặc ít nhất là một lựa chọn thiết kế) đặt việc tiêu thụ nội dung tối ưu phụ thuộc vào việc thực hiện hành động. Và chúng ta phải tự hỏi: sự thỏa hiệp như vậy có cần thiết không? Chúng ta có muốn thực hiện một thỏa hiệp như vậy không?

Khi FAB thường dẫn đến trải nghiệm người dùng kém, khi khó tìm ra hành động được sử dụng nhiều nhất trong ứng dụng và khi bạn phải tìm những cách vòng vo (trong đó FAB biến mất khi cuộn hoặc chồng chéo với các thành phần khác khi vuốt), Tôi sẽ nói câu trả lời là không.

Vật liệu thiết kế của Google, một ngôn ngữ thiết kế nguyên tắc, thống nhất khá tốt, nhưng FAB không phải là điều tốt nhất về nó.

Có mặt trong Leadback một số lượng lớn cài đặt cho phép bạn sắp xếp hầu hết mọi thuật toán cho hoạt động của tiện ích gọi lại. Cài đặt đầu tiên liên quan đến tính logic của sự xuất hiện của tiện ích trên trang web.

Bắt cuộc gọi không thời gian làm việc — các số được nhập ngoài giờ làm việc sẽ được phân phối giữa các nhà quản lý trong giờ làm việc. Người quản lý sẽ nhận được một cuộc gọi và máy trả lời tự động sẽ thông báo cho anh ta rằng cuộc gọi đã được thực hiện ngoài giờ làm việc và sẽ kết nối anh ta với một khách hàng tiềm năng.

Bắt du khách trên đường ra ngoài— tiện ích phát hiện thời điểm khách truy cập chuẩn bị rời khỏi trang web của bạn và mời anh ta liên hệ với người quản lý sau 27 giây.

Nút điện thoại nổi— một nút luôn hiển thị ở một vị trí nhất định trên trang web, khi nhấp vào, bạn có thể nhập số và liên hệ với bộ phận bán hàng. Chúng tôi khuyên bạn nên sử dụng tính năng này.

Thiết lập cửa sổ tiện ích— Bạn có thể chọn 2 tùy chọn để hiển thị tiện ích: tùy chọn “Cửa sổ” và “Toàn màn hình”. Ngoài ra hãy chọn bảng màu và thay đổi chú thích trên tiện ích. Chúng tôi khuyên bạn nên sử dụng thông tin về giảm giá và khuyến mãi để khuyến khích khách hàng để lại số liên lạc.

Tiện ích gọi lại “Toàn màn hình”

Thiết lập nút nổi - phần chúng ta cấu hình vẻ bề ngoài và bảng màu nút. Có các tùy chọn sau: Chuông, nút tròn với điện thoại, nút vuông với điện thoại và nút thời trang với một ống gợi nhớ đến các biểu tượng tin nhắn phổ biến.

Xin lưu ý rằng màu của nút có thể phù hợp với bảng màu của trang web của bạn và nút có thể được đặt ở bất kỳ đâu. Có các cài đặt bổ sung cho việc này.

Cho phép nhiều cuộc gọi cho một khách hàng— cùng một khách hàng có thể gọi cho bạn nhiều lần không? CÓ/KHÔNG Máy khách được xác định bởi trình duyệt.

Thay đổi thời gian “Chúng tôi sẽ gọi lại cho bạn sau… giây”— Bạn có thể thay đổi thời gian bạn hứa sẽ gọi cho khách hàng lên hoặc xuống.

Gọi điện cho 1 khách hàng không quá 1 lần/...— nếu bạn đã bật chức năng “Bắt khách truy cập trên đường ra”, thì bạn có thể chỉ định một khoảng thời gian để không làm phiền khách truy cập bằng cửa sổ bật lên mỗi lần.

Nhận cuộc gọi từ CIS và Châu Âu- Nếu bạn chỉ làm việc cho thị trường Nga, chúng tôi khuyên bạn không nên bật tính năng này. Nếu bạn cần khách hàng từ các quốc gia khác, hãy kích hoạt nó. Đối với các quốc gia khác (trừ Nga), mỗi phút trò chuyện sẽ được tính phí như sau: Ukraine - 3 phút, Kazakhstan - 2 phút, Belarus - 4 phút, tất cả các quốc gia khác - 5 phút.

Tên tiện ích báo cáo— Nếu bạn sử dụng nhiều tiện ích trên một tên miền.

Một thông báo sẽ xuất hiện. Xin lưu ý rằng không cần cập nhật mã trên trang web!

Thiết lập widget đã hoàn tất

Sau khi hoàn tất thiết lập trong tài khoản cá nhân Leadback Tiện ích đầu tiên của bạn sẽ xuất hiện trong phần tiện ích.

Tiện ích trong tài khoản cá nhân của bạn

Bây giờ bạn cần cài đặt mã widget trên trang web của mình.

Đến nay nó đã trở thành một khám phá đối với những người làm việc với các ứng dụng trên Nền tảng Android và cả thiết kế giao diện người dùng. Nó đã được giới thiệu bởi Google vài năm trước. Mục đích vật liệu thiết kế là sự sáng tạo ngôn ngữ hình ảnh, sẽ thống nhất các nguyên tắc thiết kế cổ điển với sự đổi mới.

Ý tưởng này có vẻ rất hứa hẹn và hứa hẹn. Material Design là nỗ lực mới nhất nhằm đồng thời mang lại trải nghiệm người dùng (UX) thoải mái và hiệu quả. Google đã thực hiện một công việc tuyệt vời trong lĩnh vực này: họ sử dụng đặt tối thiểu các yếu tố thiết kế, sử dụng các thành phần độc đáo, màu sáng, hoạt ảnh và tạo môi trường thân thiện với người dùng.

Đồng thời, các nhà thiết kế thực hành cái gọi là nút hành động nổi (FAB). Đó là một nút tròn, bề ngoài của nó được nhiều người biết đến Người dùng Android. Đó là một yếu tố đặc biệt khác của thiết kế vật liệu. FAB xuất hiện trên đầu giao diện ứng dụng và thúc đẩy người dùng thực hiện một hành động được nhắm mục tiêu cụ thể.

Về cơ bản, FAB là vì mục đích của nó là thuyết phục một người làm điều gì đó (chẳng hạn như tải xuống hoặc tải lên một số nội dung nhất định). Nút hành động mục tiêu nổi thường được đặt ở góc bên phải màn hình. Rất khó để không chú ý vì nó có thiết kế tươi sáng và hấp dẫn. FAB thúc đẩy người dùng thực hiện các hành động phổ biến nhất trong ứng dụng. Tuy nhiên, có một số vấn đề khi sử dụng các nút này.

Có vấn đề gì với các nút hành động mục tiêu nổi?

FAB đại diện cách tiếp cận hợp lý, điều này cho phép bạn thúc đẩy người dùng thực hiện hành động vì rất khó để họ không chú ý. Tuy nhiên, chúng có thể là giải pháp sai lầm cho toàn bộ thiết kế trải nghiệm người dùng. Dưới đây là một số lý do tại sao các nút hành động nổi có thể có tác động tiêu cực đến UX.

FAB có thể can thiệp vào người dùng

Như đã đề cập ở trên, các nút hành động mục tiêu nổi thường được đặt ở góc dưới bên phải màn hình. Trong hầu hết các trường hợp, chúng nằm ở phía trên nội dung ứng dụng, che phủ một phần nội dung đó.

Tất nhiên, FAB có kích thước thực sự nhỏ nên chúng chỉ che giấu một phần nhỏ nội dung khỏi mắt người dùng. Tuy nhiên, hãy xem ứng dụng Google Ảnh(ảnh chụp màn hình bên dưới) trong đó nút hành động mục tiêu nổi bao phủ một phần quan trọng của ảnh.

Để xem những gì ẩn dưới nút, người dùng sẽ phải cuộn xuống trang. Nhưng nếu nó đã ở cuối trang thì sao? Sau đó, việc cuộn sẽ không thể thực hiện được và người dùng sẽ phải thêm một số nội dung để thực hiện. phần ẩn những bức ảnh có thể nhìn thấy được.

Điều rất quan trọng là phải nhận ra một thực tế là nút hành động mục tiêu nổi, mặc dù có kích thước nhỏ nhưng có thể che giấu một phần nội dung của ứng dụng khỏi mắt người. Điều này có thể gây ra hậu quả tiêu cực đối với trải nghiệm người dùng.

Thiết kế của chúng ngăn chặn việc ngâm hoàn toàn

Các nút hành động mục tiêu nổi nổi bật so với nền chung. Trong nhiều trường hợp, điều này tạo ra trở ngại cho việc thực hiện đặc điểm quan trọng nhất Kinh nghiệm người dùng - ngâm hoàn toàn vào bầu không khí của ứng dụng.

Ví dụ một lần nữa là ứng dụng Photos của Google. Khi một người mở nó, anh ta sẽ được đưa đến thư viện của người dùng, nơi anh ta có thể chỉ cần xem ảnh. Trong trường hợp này, chức năng tìm kiếm do FAB cung cấp có thể hữu ích nhưng không được ưu tiên.

Nút mục tiêu nổi khiến anh ấy mất tập trung khi xem ảnh một cách say mê bằng cách chiếm không gian trên màn hình và chặn một số phần của hình ảnh. Trong những trường hợp như vậy, nút không nên quá nổi bật.

Chúng có thể vô dụng

Như chính các chuyên gia của Google giải thích, một nút nổi sẽ khuyến khích người dùng thực hiện một hành động được nhắm mục tiêu. Tuy nhiên, các nhà phát triển đôi khi quên tần suất một người thực hiện hành động này khi sử dụng ứng dụng.

Nguyên tắc vàng trong thiết kế trải nghiệm người dùng là làm cho các yếu tố cần thiết và thường xuyên được hiển thị, còn các yếu tố hiếm khi được sử dụng gần như vô hình. Tuy nhiên, như chúng ta thấy trong ví dụ Ứng dụng Gmail(ảnh chụp màn hình ở trên), các nhà phát triển đã không tính đến quy tắc này.

Trên màn hình ứng dụng, chúng ta thấy một nút, bằng cách nhấp vào nút đó người dùng có thể nhanh chóng tiến hành viết e-mail. Tuy nhiên, theo khảo sát gần đây, khoảng một nửa số người dùng chỉ xem email bằng thiết bị di động. Nói cách khác, họ không thường xuyên viết thư bằng điện thoại thông minh hoặc máy tính bảng.