Khối thông tin giao diện trực quan. Cung cấp các tùy chọn điều khiển thuận tiện

Đây là một sự thật tầm thường, một tuyên bố không cần thêm bằng chứng: trang đích của bạn càng dễ sử dụng, thì càng có nhiều người sử dụng nó để thực hiện hành động chuyển đổi.

Một phần thiết yếu của cái thường được gọi là "dễ sử dụng" là sự hiểu biết trực quan của người dùng về giao diện web của trang đích / trang riêng lẻ của trang web. Đây là cách chúng ta đi đến định nghĩa của thiết kế Trực quan: khi một khách truy cập nhìn thấy một thiết kế như vậy, anh ta biết chính xác mình phải làm gì.

Điều chính trong thiết kế này là nó là "vô hình". sẽ được xem xét trực giác nếu người dùng có thể tập trung vào tác vụ chuyển đổi mà không bị phân tâm trong một giây vì suy nghĩ. Trực giác giao diện rõ ràng Là một giao diện không thể nhầm lẫn hướng dẫn mọi người thực hiện hành động mà nhà tiếp thị cần.

Thiết kế trực quan tập trung vào trải nghiệm người dùng (UX) tích cực, điều này cuối cùng khiến nó gần như đồng nghĩa với thiết kế khoa học.

Vấn đề với việc thiết kế giao diện trực quan: trực quan cho ai?

Tại sao có rất nhiều trang đích / trang web khiến mọi người phải cân não khi thực hiện nhiệm vụ chuyển đổi? Tại sao không làm cho tất cả các tài nguyên web trở nên trực quan? Đó không phải là điều mà mọi người đều muốn - một khách hàng tiềm năng, một nhà tiếp thị, một nhà thiết kế web?

Thực tế là tạo ra một giao diện web trực quan không phải là một nhiệm vụ dễ dàng: tất cả mọi người về cơ bản đều khác nhau, sở hữu các cấp độ khác nhau Kinh nghiệm người dùng, và những gì có vẻ đơn giản hơn đối với một người có thể trở thành một nhiệm vụ khó khăn, gần như bất khả thi đối với người khác.

Không có tiêu chí khách quan nào cho một thiết kế trực quan: chỉ có bản thân người dùng mới cảm nhận được liệu họ có rõ ràng phải làm gì trên một trang web hay không.

Hầu hết các trang đích / trang web được thiết kế với mục đích tốt: không ai muốn gây khó khăn cho cuộc sống của khách truy cập. Các trang đích này thậm chí trực giác- nhưng, như một quy luật, nhà thiết kế! Các nhà phát triển trung bình hiếm khi dành thời gian để xem đối tượng mục tiêu trung bình sẽ sử dụng sản phẩm web của họ như thế nào.

Một người luôn nhìn thế giới theo quan điểm của riêng mình và khi anh ta thiết kế một thứ gì đó, anh ta vô thức xây dựng đối tượng này (không quan trọng, trang đích tự trị hoặc nền tảng SaaS chẳng hạn) "cho chính mình", nghĩa là , đối với những người có trình độ máy tính xấp xỉ nhau, kinh nghiệm sử dụng giao diện loại này tương đương nhau, v.v.

Điều quan trọng cần học là: Phát triển một thiết kế trực quan bắt đầu bằng việc hiểu người dùng (nhóm mục tiêu): bạn cần tìm ra cái gì trực quan cho họ và cái gì không.

Việc hiểu đối tượng mục tiêu là không thể nếu không biết khái niệm "mức độ kiến ​​thức hiện tại / hiện tại so với mức độ kiến ​​thức cần thiết" (Kiến thức hiện tại VS. Kiến thức mục tiêu).

Kiến thức thực tế VS Kiến thức cần đạt

Để bắt đầu, mọi người xuất hiện trên trang đích của bạn với một số kiến ​​thức hiện có, dựa trên một số trải nghiệm người dùng trước đó, v.v.

Đây là những gì Jared Spool, chuyên gia giao diện web ưu việt, gọi là "Kiến thức hiện tại".

Sau đó, Kiến thức Mục tiêu là cấp độ bằng cấp sẽ cho phép đại diện của đối tượng mục tiêu dễ dàng sử dụng trang đích, trang web, giải pháp SaaS của bạn.

Từ trái sang phải: No Knowledge - không có kiến ​​thức; Kiến thức hiện tại - mức độ kiến ​​thức hiện tại; Kiến thức mục tiêu - kiến ​​thức bắt buộc; Tất cả kiến ​​thức - kiến ​​thức tối đa có thể.

Sự khác biệt giữa hai cấp độ này - Kiến thức hiện tại và Kiến thức mục tiêu - được gọi là lỗ hổng kiến ​​thức(Lỗ hổng kiến ​​thức). Nhiệm vụ của nhà thiết kế là phát triển một giao diện giảm thiểu khoảng cách kiến ​​thức cho khách truy cập - giữa những gì họ biết trước khi xuất hiện trên tài nguyên và những gì họ cần biết để sử dụng trang web đúng cách.

Khó khăn trong việc giải quyết vấn đề này nằm ở chỗ một nhà thiết kế có thể làm việc cho một nhà tiếp thị với đối tượng mục tiêu cực kỳ rộng, từ những người có kỹ thuật cao về kỹ thuật cho đến những người bà chỉ có kỹ năng máy tính cộng với tất cả những người dùng, xét về trình độ kỹ năng, nằm ở giữa nhóm hai cực mục tiêu này.

Nhóm càng nhỏ, người thiết kế càng dễ dàng và ngược lại. Rõ ràng là anh ta nên nhận thông tin về nhóm mục tiêu từ một nhà tiếp thị biết thị trường mục tiêu của anh ta.

Mô hình khái niệm

Nếu người dùng chưa bao giờ sử dụng trang đích / trang web của bạn, điều này không có nghĩa là kiến ​​thức hiện tại của họ về chủ đề này là 0: rất có thể họ đã từng ở trên các trang web tương tự khác trước đây. Một số thì không, nhưng thực sự thì mỗi người trong số này đều có mô hình khái niệm(Mô hình khái niệm) của tài nguyên web lý tưởng.

Hãy để chúng tôi giải thích bằng một ví dụ: giả sử có một người chưa bao giờ mua hàng trực tuyến, nhưng lại có kinh nghiệm mua sắm ngoại tuyến. Chúng tôi cho anh ta ngồi trước máy tính, cho anh ta xem giao diện web Amazon.com và nói: "Bạn có thể mua hàng tại đây!"

Bây giờ người này, cùng với mô hình khái niệm của một "cửa hàng ngoại tuyến", có một mô hình khái niệm của một "cửa hàng trực tuyến". Quá trình mua sắm trực tuyến càng giống với mua hàng thông thường, thì mô hình hành vi “mua hàng” của người dùng được liên kết với mô hình khái niệm cụ thể “Amazon là một cửa hàng trực tuyến” sẽ càng mạnh mẽ hơn, bởi vì hai loại trải nghiệm người dùng - trực tuyến và ngoại tuyến - sẽ càng gần càng tốt.

Nhưng nếu người dùng đã sử dụng mua sắm trực tuyến, nhưng trên một tài nguyên web khác, thì mô hình khái niệm về trang Thương mại điện tử của họ sẽ khác với mô hình đã đề cập ở trên: có thể giao diện Amazon.com sẽ không đáp ứng được kỳ vọng trực quan của họ.

Vì vậy, nếu phần lớn khách hàng tiềm năng của bạn chưa bao giờ sử dụng các trang đích / trang web / giải pháp SaaS trông giống với tài nguyên web của bạn, bạn sẽ phải đối phó với với mô hình khái niệm.

Để làm được điều này, bạn cần tìm hiểu xem họ có trải nghiệm gì khi tương tác với các trang đích / trang web càng giống với trang của bạn càng tốt - và cứ tiếp tục như vậy khi họ rời xa sự tương đồng của thiết kế. Giải pháp web của bạn càng ít phù hợp với mô hình tinh thần đang thịnh hành giữa các đối tượng mục tiêu, thì nó sẽ càng kém trực quan.

Biết người dùng của bạn!

Để phát triển một giao diện được khách truy cập tiềm năng coi là "trực quan", cần phải đánh giá mức độ kiến ​​thức hiện tại và yêu cầu của nhóm đối tượng. Nói cách khác: những gì người dùng đã biết và những gì họ cần biết?

Có hai những cách hiệu quảđánh giá mức độ hiểu biết của đối tượng mục tiêu:

• Nghiên cứu thực địa: bạn chỉ cần đến gặp khách hàng tiềm năng của mình và quan sát hành vi của họ trên Internet trong “môi trường” quen thuộc của họ. Điều này là đủ để có được một ý tưởng về trình độ kiến ​​thức hiện tại của họ.
• Kiểm tra khả năng sử dụng qua vai: mời một vài đại diện trong nhóm mục tiêu của bạn tham gia thử nghiệm, yêu cầu họ hoàn thành một loạt nhiệm vụ trên các trang của bạn. Cho phép người dùng bình luận to về hành động của họ, nói bất cứ điều gì họ nghĩ. Một thử nghiệm tương tự có thể được thực hiện từ xa.

Trong cả hai trường hợp, bạn quan sát và ghi chép mà không can thiệp vào những gì đang xảy ra. Một nhóm thử nghiệm gồm 10 người tham gia là đủ để giải quyết 90% các vấn đề về khả năng sử dụng.

Khi nào một trang đích có thể được sử dụng một cách trực quan?

Jared Spool đã đề cập trước đó đã tiến hành nghiên cứu về chủ đề này vào năm 2005, dẫn đến bài báo "Điều gì làm cho thiết kế trở nên trực quan?" (Điều gì làm cho một thiết kế có vẻ "trực quan"?).

Trong đó, Jared tuyên bố đã tìm ra hai điều kiện, theo đó người dùng tin rằng họ đang ở trước mặt họ. trực giác giao diện:

• Mức độ kiến ​​thức hiện tại và yêu cầu là giống hệt nhau. Người dùng, tương tác với giao diện web, biết mọi thứ cần thiết để đạt được mục tiêu cuối cùng là tương tác với tài nguyên (trong trường hợp của chúng tôi là chuyển đổi ở bất kỳ hình thức tùy ý nào).
• Mức độ kiến ​​thức hiện tại và mức độ yêu cầu khác nhau, nhưng khách truy cập, không nhận ra nó, thu hẹp khoảng cách kiến ​​thức với sự trợ giúp của các manh mối tinh vi. Người dùng tự nhiên trải qua quá trình đào tạo mà không hề hay biết.

Nói cách khác, bạn làm cho các trang đích của mình đơn giản đến mức thực hiện các tác vụ chuyển đổi không yêu cầu khách truy cập đào tạo hoặc bạn cung cấp cho các trang web hướng dẫn, mẹo, danh sách các câu hỏi thường gặp (FAQ) có khả năng hiển thị cao và thực sự hướng dẫn người dùng khi di chuyển.

Minh chứng tốt nhất cho luận điểm đầu tiên là giao diện của gã khổng lồ tìm kiếm Google. Không có cách nào bạn có thể sử dụng nó không chính xác, đơn giản là không có Đường cong Học tập - cho bất kỳ người dùng nào, ngay cả với cấp độ thấp nhất kiến thức rõ ràng phải làm gì.

Một xác nhận tốt về điểm thứ hai là giải pháp SaaS của Wufoo để tạo các biểu mẫu khách hàng tiềm năng. Ngay khi bạn bắt đầu xây dựng biểu mẫu đầu tiên của mình, một quá trình học hỏi tự nhiên không thể nhận thấy của bạn sẽ bắt đầu với những hướng dẫn đơn giản.

Hóa ra có hai cách để tạo thiết kế trực quan.

Bạn có thể giảm mức kiến ​​thức cần thiết bằng cách đơn giản hóa bản thân thiết kế cho đến khi nó phù hợp với mức kiến ​​thức hiện tại tối thiểu có thể có của bất kỳ thành viên nào trong đối tượng mục tiêu.

Trong tùy chọn thứ hai, bạn nâng cao kiến ​​thức thực tế của người dùng lên giá trị cần thiết thông qua đào tạo.

Tuy nhiên, bạn có thể sử dụng cả hai phương pháp cùng một lúc.

Điều hướng và tìm kiếm trang web trực quan

3 năm trước, Mike Volpe, một chuyên gia phần mềm, đã tạo ra một biểu đồ hình tròn minh họa rõ ràng các yêu cầu của khách truy cập đối với việc thiết kế tài nguyên web (rõ ràng biểu đồ là kết quả của quá trình nghiên cứu cẩn thận).

Vì vậy, theo sơ đồ này, 76% số người được hỏi là yếu tố quan trọng trong thiết kế của tài nguyên, tính đơn giản của việc tìm kiếm theo nội dung bên trong đã được xem xét (nghiên cứu này thường liên quan đến lĩnh vực Thương mại điện tử, lưu ý). Trước hết, tất nhiên, họ muốn tự tìm menu.

Đây là câu hỏi chính nằm ở đâu: nếu trang web của bạn chứa số lượng lớn nội dung, sau đó làm thế nào để cấu trúc / danh mục nó một cách chính xác?

Peep Laia khuyên nên áp dụng một phương pháp tối ưu hóa ngoại tuyến khác, cái gọi là "phương pháp phân loại thẻ" (Card sorting), giống với một phương pháp thực chơi bài Với quy tắc đơn giản: Những người tham gia thí nghiệm được phát những tấm bìa cứng có ghi tên các loại: "linh tinh", "hàng gia dụng", v.v.

Trên mỗi thẻ có tên ưu đãi, có thể là "vòi tưới nước" hoặc "đồ uống cho chim" do người tổ chức khảo sát ném đi, những người tham gia đặt thẻ của họ - ưu đãi được bao gồm số lượng thẻ lớn nhất với tên của các loại rất có thể sẽ thuộc về truy vấn tìm kiếm cho các danh mục này trong nhóm mục tiêu chế độ xem tập thể.

Nghe có vẻ buồn cười, nhưng phương pháp này được mô tả trong bài báo "Sắp xếp thẻ: hướng dẫn rõ ràng" (2004) của Donna Spencer, chuyên gia tối ưu hóa trải nghiệm người dùng người Úc nổi tiếng thế giới.

Và cuối cùng, nếu các nhà thiết kế web, tạo giao diện, quy kinh nghiệm và kỹ năng của họ cho bất kỳ người dùng nào, thì liệu các nhà tiếp thị có nghĩ rằng ý tưởng của họ về danh mục sản phẩm trùng với ý tưởng của nhóm mục tiêu?

Tất nhiên, các món trong thực đơn nên có tên có ý nghĩa, không có gì trừu tượng. Các chuyên gia thường khuyên gọi các mục có từ kích hoạt: "Mua", "Liên hệ với chúng tôi", v.v.

Đã đến lúc nhớ lại cái gọi là Luật của Cassells, được đặt theo tên của chuyên gia CRO của Google, Shane Cassells:

50% tổng số người dùng không mua bởi vì họ không thể tìm thấy những gì họ đang tìm kiếm.

50% tổng số người dùng không mua vì họ không thể tìm thấy thứ họ đang tìm kiếm

Đây là lý do tại sao có một tìm kiếm nội dung tốt không chỉ quan trọng, mà còn là lưu trữ!

Trang web của bạn phải có thể tìm kiếm được và đến lượt nó, phải dễ tìm.

Gã khổng lồ thương mại điện tử Amazon có rất nhiều ưu đãi, đó là lý do tại sao tìm kiếm là trọng tâm trong giao diện web của nó. Nhưng bạn có thể tưởng tượng Amazon có thể hoạt động khác đi như thế nào không?

Đồng thời - hãy đảm bảo rằng bạn cũng bật "Tìm kiếm trang web" trong chỉ số Phân tích của Google... Bạn sẽ nhận thấy rằng người dùng sử dụng truy vấn tìm kiếm có xu hướng có tỷ lệ chuyển đổi cao hơn (những người này đã biết những gì họ đang tìm kiếm bằng cách yêu cầu một truy vấn).

Mọi người dành phần lớn thời gian của họ trên các trang web không phải của bạn

Hãy nhớ một lần và mãi mãi: khách truy cập của bạn sẽ dành phần lớn thời gian để lướt internet trên các trang đích và trang web khác. Họ đã quen với thực tế là các tài nguyên web trông theo một cách nhất định, tức là họ đã hình thành trình độ kiến ​​thức hiện tại.

Các yếu tố thường được chấp nhận (thông thường, thiết lập, khuôn mẫu) của nhận thức về các trang web như sau:

• nhấp vào logo (ở bên trái góc trên) luôn trả người dùng về trang chủ / trang chủ;
• điểm cuối cùng trong menu ngangđiều hướng phải được gọi là "Liên hệ / Liên hệ với chúng tôi" (hoặc nó điểm dưới cùng menu dọc);
• Thông tin liên lạc phải nằm ở chân trang (footer, "footer");
• cố gắng đạt được sự nhất quán và nhất quán: điều hướng và các yếu tố quan trọng khác nên giữ nguyên vị trí trên bất kỳ trang nào của tài nguyên ;;
• liên kết phải dễ dàng phân biệt với văn bản thông thường;
• nếu người dùng có thể và nên cuộn trang, thanh cuộn phải hiển thị và có thể phân biệt được với nền;
• ở các nước thuộc nền văn minh Châu Âu theo nghĩa rộng, người dùng sẽ đọc nội dung đầu tiên nằm bên trái trang;
• đặt thông báo trợ giúp và thông báo trên trang theo khối;
• sử dụng nhiều nhất những từ dễ hiểu: "Danh bạ" thay vì "Liên lạc".

Vâng, vẫn có những ngoại lệ đối với các quy tắc và đôi khi còn mang lại những lợi ích bất ngờ. Nhưng bất kỳ sự đổi mới thiết kế nào cũng khó khăn và rủi ro. Bạn không nên bơi ngược dòng nước, bạn không cần phải sửa một thứ gì đó chưa bị hỏng.

Vì vậy, chúng tôi dễ dàng tiếp cận đoạn cuối bài đăng của chúng tôi.

Rủi ro thiết kế lại không hợp lý

Tại hội nghị An Event Apart năm 2012, Jared Spool đã phát biểu một luận điểm mới:

thiết kế lại dẫn đến khoảng cách về trình độ hiểu biết của người sử dụng tài nguyên web.

Luật Pareto hoạt động không thương tiếc trong lĩnh vực tồn tại của con người: 20% người dùng mang lại 80% thu nhập không chấp nhận bất kỳ thiết kế lại nào của doanh nghiệp Thương mại điện tử yêu thích của họ. Họ đã quen với cách mọi thứ hoạt động và khi bạn thay đổi thiết kế của trang web, bạn sẽ thay đổi nó so với những khách hàng "vàng" trả nhiều tiền nhất.

Không phải mọi người ghét sự thay đổi mà chỉ là họ ghét những thay đổi làm mất đi trình độ hiểu biết hiện tại của họ. Trên đường đi, bạn đã phá hủy thiết kế rất trực quan đó không khiến khách hàng ngừng suy nghĩ dù chỉ một giây khi bước xuống đường dẫn chuyển đổi..

Bạn nên tập trung vào những khách hàng / khách hàng quan trọng nhất của mình. Thiết kế phải trực quan nhất cho họ. Đừng cố gắng làm hài lòng tất cả mọi người.

Cách tốt nhất là thiết kế lại vĩnh viễn, không phô trương, lặp đi lặp lại (nói cách khác là ESR tiến hóa). Phương pháp này sẽ cho phép bạn nhanh chóng phản hồi các kết quả tích cực hoặc tiêu cực do những thay đổi mới gây ra.

Tất nhiên, tất cả những điều trên đều áp dụng cho tài nguyên có lượng lớn đối tượng mục tiêu. Nếu bạn có ít lưu lượng truy cập và thiết kế hiện tại rõ ràng là kém ấn tượng, thì hãy thoải mái bắt đầu một cuộc đại tu lớn.

Trong thời gian làm việc tương đối ngắn của mình (khoảng 6 năm), tôi thường nghe thấy những câu nói của các lập trình viên có kinh nghiệm và mới làm quen - “Tôi cảm thấy rằng cách này nên hiệu quả”, “Tôi có cảm giác rằng phương pháp này sẽ không hiệu quả”, “Hãy làm Giao diện trực quan" Vân vân. Tất cả những điều này là biểu hiện của trực giác trong quá trình phát triển và lập trình.
Về cô ấy và sẽ tiếp tục trò chuyện.

Lấy từ oprah.com

Để bắt đầu, tôi muốn định nghĩa chính khái niệm "trực giác".

Trực giác (tiếng Latinh muộn - "suy ngẫm", từ động từ intueor - tôi nhìn chăm chú) là một phương pháp giải quyết vấn đề bằng một kết luận duy nhất trong tiềm thức, dựa trên trí tưởng tượng, sự đồng cảm và kinh nghiệm trước đó, "trực giác", sự phân biệt.

"Wikipedia"

Trực giác (từ Lat. Intueri - nhìn chăm chú, cẩn thận) là một quá trình suy nghĩ, bao gồm việc tìm ra giải pháp gần như ngay lập tức cho một vấn đề mà không đủ nhận thức về các kết nối logic.

Trực giác (từ Lat. Intueri - nhìn chăm chú, cẩn thận) - tri thức nảy sinh mà không nhận ra các cách thức và điều kiện tiếp nhận nó, do đó chủ thể có được nó như một kết quả của "sự quyết định trực tiếp"

Và mỗi phương pháp này được phản ánh trong quá trình lập trình, và có thể có cả tác động tích cực và tiêu cực.

Vì vậy, trước hết, tôi xin chia lập trình "trực quan" thành 2 thành phần: - lạc quan và bi quan

Lập trình trực quan lạc quan

Trực giác dựa trên kinh nghiệm

Một số lượng lớn các ví dụ về việc sử dụng trực giác như vậy trong các quy trình làm việc đã được Dmitry Chepel từ Acronis mô tả trong bài báo của ông trên Habré. Nếu bạn chưa đọc nó, hãy nhớ đọc nó.

Tôi muốn cung cấp cho bạn một ví dụ thử nghiệm khác. Dưới đây là một ví dụ về mã Sidef (Tôi hy vọng không nhiều bạn biết nó). Hãy thử không thực sự đi vào chi tiết, hãy đoán xem anh ấy nói về điều gì:

Vòng lặp (var swapped = false (| i | if (arr> arr [i]) (arr = arr swapped = true)) * arr.end swapped || break) return arr

Có lẽ một số bạn đã đoán được điều này nói về điều gì, đã nhìn thấy những phần quen thuộc trong mã, có lẽ một số thì không. Tôi đã thử thử nghiệm này trên nhóm nhỏ lập trình viên mà họ biết, và kết quả là như sau - hơn một nửa (khoảng 65%) số người có thể hiểu những gì đang được nói trong một thời gian rất ngắn.

Tôi hỏi họ làm thế nào họ có thể đoán được - và câu trả lời phổ biến nhất là:
"Chúng tôi đã nhìn thấy những đoạn mã quen thuộc và ngay lập tức đoán được nó là gì."

Do đó, tích lũy kinh nghiệm, bộ não của chúng ta có thể nhanh chóng đưa ra quyết định về mã mà chúng ta làm việc mà không cần thêm nỗ lực trí óc.

Chính vì điều này mà đối với chúng tôi, dường như các lập trình viên nhiều kinh nghiệm hơn đều có "sự tinh tế" nhất định về một dự án hoặc bất kỳ ngôn ngữ lập trình nào.

Trực giác dựa trên logic

Nhưng điều gì sẽ xảy ra nếu chúng ta lấy đoạn mã Python sau đây làm ví dụ:

Def sum (a, b): ... def mult (a, b): ... def trừ (a, b): ... def chia (a, b): ... def tính (a, b , chiến lược): ... tính (4, 2, tổng) # 6 tính (4, 2, mult) # 8 tính (4, 2, trừ) # 2 tính (4, 2, chia) # ??
Ngay cả khi không nhìn thấy mã nguồn, chúng tôi "trực giác" cảm thấy kết quả của việc thực thi sẽ như thế nào chức năng cuối cùng trên danh sách.

Điều này là do thực tế là chúng tôi phân tích tên của các chức năng, so sánh chúng với kết quả và do đó xây dựng một số mẫu, giả định về mã được phân tích. Do đó, chúng ta kết nối trực giác của mình, được hỗ trợ bởi logic, để đọc những đoạn mã như vậy.

Ở đây tôi muốn lưu ý rằng mã tương ứng với giả định của chúng ta, trực giác của chúng ta, chúng ta thường gọi là mã "có thể đọc được", "có thể hiểu được". Điều này là do chúng ta không chỉ sử dụng tài nguyên của bộ não mà còn sử dụng trực giác của chúng ta, do đó làm cho việc đọc và hiểu mã trở nên dễ dàng hơn.

Giao diện trực quan

Những kỳ vọng này được hình thành trên cơ sở 2 thành phần - kinh nghiệm trước đây của chúng tôi và các mô hình và giả định logic.

Nếu tất cả các trang trong trang web của bạn đều có menu ở trên cùng, nhưng trên trang Phản hồi lại có menu ở bên trái, thì người dùng cuối có thể hơi bối rối khi “trực giác của anh ta” cho anh ta biết rằng menu phải ở trên cùng.

Nhưng tại sao đôi khi, khi chúng tôi truy cập một trang web với thiết kế ban đầu hoặc một ứng dụng di động mới, chúng ta có cảm giác rằng trang web này trông tuyệt vời hay khủng khiếp?

Trực giác như phi lý trí

Loại trực giác này nguy hiểm nhất trong quá trình phát triển, nhưng đồng thời cũng là cách để giải quyết nhanh các vấn đề phức tạp.

Đây là điều được gọi là "ma thuật" trong lập trình - chúng tôi thay đổi giá trị của một biến hoặc cờ và kỳ diệu thay, mã của chúng tôi bắt đầu hoạt động, mặc dù quyết định này được đưa ra hoàn toàn theo bản năng. Và chỉ loại trực giác này mới là biểu hiện thực sự của nó.

Lập trình bản năng bi quan

Như đã nói ở trên, trực giác “phi lý trí” vừa là cứu cánh vừa là công cụ nguy hiểm trong tay lập trình viên.

Dựa vào những quyết định bản năng như vậy, chúng ta mất niềm tin vào đoạn mã chúng ta đã viết, trong đó điều "kỳ diệu" bắt đầu xảy ra.

Quan trọng là, những quyết định như vậy tạo ra một số mức độ lo lắng trong các quyết định tiếp theo. Sự chiếm ưu thế của cảm giác, cảm giác và sự phi lý trong quá trình phát triển dẫn đến việc không thể biện minh cho mọi thứ với sự trợ giúp của logic, và kết quả là - sự phức tạp của việc hiểu mã, mất khả năng đọc.

Là một kết luận

P.S. Đối với những ai quan tâm đến chủ đề về trực giác trong phát triển phần mềm, tôi khuyên bạn nên đọc

Giao diện là một loại "cầu nối" giữa người dùng và hệ thống. Sử dụng giao diện, người dùng sẽ có thể giải thích cho hệ thống những gì họ muốn từ nó và hệ thống sẽ làm điều đó. Nhưng điều gì sẽ xảy ra nếu sự hiểu biết này giữa máy móc và con người không đạt được? Người dùng chỉ cần rời khỏi trang web. Đây là cách người dùng Internet hành xử theo Viện Tiếp thị Trực tuyến:
- 85% có thể rời khỏi trang web nếu họ không thích thiết kế giao diện;
- 83% sẽ rời khỏi trang web nếu họ phải thực hiện nhiều lần nhấp chuột để tìm thấy thứ họ cần;
- 40% sẽ không bao giờ quay lại một trang web nếu họ cảm thấy khó khăn khi sử dụng nó lần đầu tiên.

Các nguyên tắc của một giao diện tốt là giống nhau đối với các trang web, chương trình và dịch vụ. Tôi đã thu thập 17 cái chính (và ở phần cuối, bạn sẽ tìm thấy một cái nhìn tổng quan nhỏ về cách kiểm tra khả năng sử dụng của giao diện).

Từ bài báo, bạn sẽ học:

Một giao diện tốt phải:

1. Hãy trực quan.

Giao diện người dùng là thứ phải rõ ràng nhất có thể đối với hầu hết mọi người. Nếu một người, sau khi mở ứng dụng hoặc truy cập trang web, không hiểu cách sử dụng nó, thì sau khi nhấn ngẫu nhiên vài giây trên các nút khác nhau, anh ta sẽ thất vọng và rời khỏi tài nguyên. Rất có thể là mãi mãi.

Một giao diện trực quan là một trong đó:
1) tất cả các yếu tố được xây dựng theo các nguyên tắc của logic cơ bản.
Lấy ví dụ, một trang web có nội dung văn bản (bài báo). Giao diện logic của nó sẽ như thế này:
- tên trang web ở đầu trang, bên dưới nó - Mô tả ngắn nguồn;
- bên dưới là menu với các phần của trang web;
- chặn với các liên hệ và phản hồi ở phần trên bên phải của menu;
- các bài báo được sắp xếp theo thứ tự chúng đã được thêm vào trang web;
- ở cuối mỗi bài viết có các nút "tiếp theo" và "trước đó";
- các nút danh mục phải luôn hiển thị để bạn có thể chuyển đến phần khác bất kỳ lúc nào;
- quy tắc trang web, thông tin liên hệ chi tiết, thông tin về nhà phát triển, v.v. nằm ở phần chân trang của trang web, vì đây là nơi chúng luôn được tìm kiếm.

Đừng khiến người dùng nhầm lẫn với cách sắp xếp không theo tiêu chuẩn của các khối quen thuộc, mà hãy sử dụng các nguyên tắc đã được kiểm chứng. Blog của nhà tiếp thị Heidi Cohen được cấu trúc theo một cách rõ ràng và hợp lý:

Đây là một ví dụ từ giao diện chương trình. Ngay cả khi các biểu tượng không được ký, nó vẫn khá rõ ràng ý nghĩa của chúng. Các nút được sắp xếp theo thứ tự logic - xét cho cùng, mọi người đều hiểu trực quan rằng sau nút “tạm dừng” sẽ có nút “dừng”, v.v.

2) các nút được dán nhãn rõ ràng.
Tránh các nút có thể gây hiểu nhầm. Không cần phải phát minh lại bánh xe. Một dấu hỏi lớn ngay lập tức cho người dùng biết nếu có bất kỳ hướng dẫn hoặc trợ giúp nào đằng sau nó. Kính lúp luôn là một hình thức tìm kiếm trên một trang web.

Nhưng bạn sẽ nghĩ gì nếu bạn nhìn thấy một nút trên trang web hoặc trong một chương trình, chẳng hạn, có hình vuông bị gạch chéo? Rất có thể, nhiều người dùng thậm chí sẽ không dám nhấp vào nó, vì họ sẽ không hiểu hành động này sẽ dẫn đến điều gì.

Và để hiểu rõ hơn về hành động của người dùng, bạn có thể sử dụng nhãn nút. Chúng xuất hiện khi di chuột.

3) có sự trợ giúp cho người dùng nếu anh ta “bị lạc”.
Nếu người dùng truy cập vào trang 404, ngay lập tức cung cấp cho họ một hướng dẫn ngắn về những gì họ có thể làm tiếp theo. Ví dụ: mời anh ta quay lại phần trước và tìm kiếm thông tin cần thiếtở đó.

Hoặc một tình huống như vậy. Bạn có một cửa hàng trực tuyến. Tại đầu vào không chính xác thông số sản phẩm, người dùng thấy một thông báo lỗi. Viết ngay vào đó những gì anh ta nên làm để mô tả sản phẩm một cách chính xác. Nếu sản phẩm mong muốn không có trong kho - hãy viết về cách người dùng có thể nhận được thông báo về sự xuất hiện của sản phẩm này.

Và một ví dụ minh họa:

2. Có thể dự đoán được.

Trong các tình huống khác, khả năng dự đoán có thể nhàm chán và không thú vị, nhưng không phải khi nói đến giao diện. Người dùng, khi nhìn vào phần tử giao diện này hoặc phần tử giao diện kia, sẽ hiểu ngay lập tức họ sẽ hành xử như thế nào trong trường hợp tương tác. Nếu đối tượng trông giống như một menu, nó sẽ hoạt động giống như một menu; nếu nó trông giống như một thanh trượt, thì nó sẽ di chuyển một cái gì đó tương ứng. Tư duy sáng tạo tất nhiên là tốt, nhưng không phải trong trường hợp này.

Một ví dụ về thiết kế giao diện của chương trình trình phát. Các nút phía trên (“trước đó” - “phát” - “tiếp theo”) phải thực hiện chính xác các chức năng này và thanh trượt sẽ thay đổi mức âm lượng.

Thêm một vài ví dụ. Nếu bạn làm cho các nút trở nên cồng kềnh, chúng sẽ trông giống các nút hơn, vì vậy chúng sẽ có nhiều khả năng được nhấp hơn:

Và công tắc bật / tắt trông có thể hiểu được khi được thực hiện như thế này:

Một trong những nỗi sợ hãi lớn nhất của các nhà thiết kế là họ sẽ bị coi là không có nguồn gốc. Và do đó, họ thường tránh sử dụng các kỹ thuật từ lâu đã được chứng minh là hiệu quả và hiệu quả, ủng hộ việc tạo ra “một cái gì đó mới và sáng tạo”. Tất nhiên, không cần thiết phải tham gia vào việc đạo văn công khai. Nhưng sử dụng các mô hình mà người dùng đã biết để xây dựng giao diện là một cách chắc chắn để làm cho nó có thể dự đoán được. Những tài nguyên nào thường được bạn sử dụng nhất các đối tượng mục tiêu? Facebook, LiveJournal, Twitter, Amazon, Youtube? Sử dụng một phong cách tương tự trong giao diện của bạn để họ có thể cảm thấy quen thuộc. Ví dụ: nếu bạn đang nhắm mục tiêu đến Youtube, hãy đặt menu chính theo chiều dọc và đặt nó ở bên trái của trang và căn giữa thanh tìm kiếm ở trên cùng.

3. Hãy sống tối giản.

Bằng cách cố gắng đặt càng nhiều danh mục, menu, nút, v.v. trong giao diện càng tốt, bạn sẽ chỉ gây hại lớn cho nó. Một giao diện quá lộn xộn là một trở ngại lớn cho người dùng để hiểu nó. Bất cứ điều gì có thể được mô tả trong một cụm từ không nên được mô tả trong ba cụm từ. Các yếu tố phụ và các danh mục phụ trên trang chủ cũng vô dụng. Kiểm tra sẽ giúp bạn xác định cái nào là “thừa” và cái nào không. (làm thế nào nó có thể được thực hiện ở cuối bài viết)... Nhưng bạn không nên hy sinh điều gì đó thực sự quan trọng - nếu bạn biết điều đó mà không có lời giải thích nào (chi tiết hơn về các mẹo sẽ được cung cấp bên dưới) hoặc là nút bổ sung Người dùng sẽ rất khó để tìm ra nó, sau đó đặt nó vào giao diện, nhưng hãy làm điều đó một cách cô đọng nhất có thể.

Đẹp, nhưng đồng thời thiết kế giao diện ứng dụng khá lạc hậu. Không có gì thừa và khó hiểu - chỉ cần thiết và đúng mức.

4. Tải nhanh chóng.

Giao diện tải chậm sẽ gây khó chịu và đẩy lùi người dùng, khiến họ ngày càng không thích tài nguyên. Đảm bảo tốc độ tải xuống tối ưu để bạn thoải mái. Ở một mức độ lớn, điều này có liên quan đến điểm trước đó - xét cho cùng, càng ít phần tử “nặng” trên trang web, nó sẽ tải càng nhanh.

Để làm cho trang web của bạn hoạt động nhanh hơn, hãy sử dụng các mẹo sau: 8 Cách.

5. Hiển thị tất cả các tùy chọn quan trọng.

Tốt nhất là chỉ sử dụng danh sách và menu thả xuống ở những nơi không thể tránh được. Trong các trường hợp khác, hãy cố gắng thể hiện ngay cho người dùng thấy tất cả khả năng của mình. Nếu một phần hành động có thể sẽ bị ẩn đi, người dùng có thể không đoán được mình cần nhấp vào đâu để thực hiện một hành động nào đó. Và nếu những hành động này được nhắm mục tiêu (“mua sản phẩm”, “đặt hàng”), thì chúng hoàn toàn không thể bị ẩn trong menu thả xuống, mà ngược lại, hãy chú trọng đặc biệt đến chúng.

Ví dụ về loại menu thả xuống có thể có quyền tồn tại Tại đây, di chuột qua các phần phụ trong các phần menu, khá tiện lợi. Tuy nhiên, ví dụ: nút "Danh bạ" hiển thị ngay lập tức mà không cần di chuột thêm.

Các nút dành cho hành động của người dùng được ưu tiên phải nổi bật so với các nút khác. Có một nút như vậy “Thêm vào giỏ hàng”.

6. Có thể giao tiếp với người dùng.

Vấn đề là người dùng phải hiểu hành động của mình hiện đang được hệ thống xử lý. Quá trình gửi tin nhắn phải đi kèm với việc hiển thị cụm từ "Tin nhắn đang được gửi", và phần cuối của quá trình này là "Đã gửi tin nhắn"... Nếu có lỗi trong hệ thống, người dùng cũng phải được thông báo về điều này, cũng như lý do gây ra lỗi và những gì anh ta có thể làm trong tình huống này. Nếu tài nguyên phải được tải khối lượng lớn thông tin, sau đó bạn cần đặt các thanh tiến trình để người dùng có thể theo dõi trạng thái của hệ thống.

Đối với thử nghiệm bên dưới, tôi chỉ điền vào hai cột đầu tiên của biểu mẫu đăng ký, để lại một dòng trống với e-mail và đặc biệt nhập sai mật khẩu lặp lại. Hệ thống ngay lập tức chỉ ra lỗi (được đánh dấu màu đỏ). Đây là cách mà bất kỳ giao diện tốt nào cũng nên hoạt động.

7. Có các kiểu khác nhau cho các nút với các kiểu hành động khác nhau.

Trong bất kỳ giao diện nào, mỗi nút đều có mục đích riêng: đi đâu đó, mở menu, mở trong cửa sổ mới, tải xuống, v.v. Để không gây nhầm lẫn cho người dùng, hãy làm theo các quy tắc sau:

1) các phần tử có thể nhấp và không nhấp được phải khác nhau. Bạn có thể đánh dấu chúng bằng màu sắc, phông chữ, kích thước. Người dùng sẽ thấy ngay những nút nào anh ta có thể nhấn và đi đến đâu đó, và những nút nào hiện diện chỉ để biết thông tin.
2) đánh dấu bằng màu sắc hoặc kiểu dáng cho phần menu mà người dùng hiện đang ở.

Trên trang này, rõ ràng ngay lập tức rằng chúng tôi đang ở trong phần "Dịch vụ" và nó được đánh dấu màu đỏ. Quay trở lại điểm 5, tôi lưu ý rằng hành động mục tiêu ở đây là mua hàng, vì vậy nút "mua" được đánh dấu trên nền của các nút khác và rất lớn.

8. Hãy hấp dẫn.

Chức năng và sự tiện lợi là tốt, nhưng cũng có một "đẹp / không đẹp". Bất kỳ người dùng nào cũng sẽ hài lòng hơn nhiều với giao diện, trong số những thứ khác, cũng rất đẹp mắt.

Nhưng đừng quên điều đó Thiết kế đẹp- một điều chủ quan. Bạn sẽ không thể làm cho nó đẹp như nhau cho tất cả mọi người, cho dù bạn có cố gắng đến đâu. Đồng ý rằng khi phát triển tài nguyên cho học sinh trung học và tài nguyên cho kế toán, bạn sẽ cần đưa ra các quyết định thiết kế khác nhau. Do đó, trước hết, hãy tập trung vào đối tượng mục tiêu của bạn và nhu cầu của họ.

Theo tôi, những ví dụ thiết kế này khá hấp dẫn. Trong trường hợp đầu tiên, chúng tôi hài lòng nhất với các biểu tượng được tạo ban đầu và khối lượng của hình ảnh, trong trường hợp thứ hai - cách phối màu và sắp xếp các yếu tố.

9. Cung cấp khả năng cá nhân hóa.

Cá nhân hóa là khả năng tùy chỉnh một cái gì đó “cho chính bạn”. Thông thường, chức năng này có thể được tìm thấy trong các chương trình, dịch vụ và ứng dụng. Người dùng có thể thay đổi, ví dụ: màu phông chữ, kiểu biểu tượng, hình nền, kích thước của các khối văn bản tùy thích (tất nhiên là chọn từ các tùy chọn được đề xuất).

Trong dịch vụ Trello, bạn có thể thay đổi nền thành màu hoặc hình ảnh khác.

Và đây là cách nó cho phép bạn cá nhân hóa tài khoản Twitter của mình:

10. Trung thành với lỗi của người dùng.

Chưa hết, sẽ luôn có những người dùng không thể hiểu ngay lập tức khoảnh khắc này hay thời điểm khác khi làm việc với giao diện. Họ sẽ thực hiện các hành động sai, và sau đó giao diện phải đối mặt với nhiệm vụ đảm bảo rằng những lỗi này có thể được sửa chữa nhanh chóng. Nếu người dùng vô tình xóa thông tin anh ta cần, anh ta nên có cơ hội để khôi phục thông tin đó. Người dùng đã vào nhầm trang sẽ có thể nhanh chóng quay lại trang trước hoặc một phần bằng cách nhấn nút quay lại. Để ngăn chặn các hành động sai, giao diện nên hỏi lại người dùng xem anh ta có thực sự muốn làm điều này hay không. Ví dụ, "Lúc kết thúc trang hiện tại quá trình tải xuống tệp sẽ bị gián đoạn. Bạn có thực sự muốn làm điều này? "... Tuy nhiên, đừng lạm dụng nó với những câu hỏi như vậy, nếu không nó sẽ trở nên khó chịu.

Hai ví dụ từ các ứng dụng: khi xóa hoặc lưu dữ liệu, hệ thống sẽ hỏi bạn có thực sự muốn thực hiện việc này hay không. Tốt hơn là chỉ định các câu hỏi loại này cho giao diện khi người dùng muốn thực hiện một hành động có thể dẫn đến hậu quả không thể thay đổi (xóa một nhiệm vụ - trong ví dụ đầu tiên) hoặc nếu đây là một hành động vô nghĩa (lưu nhóm không có thành viên - trong ví dụ thứ hai).

11. Nói ngôn ngữ của người dùng.

Tất cả văn bản giao diện, bất kỳ chỉ định nào phải được tạo cho đối tượng mục tiêu của tài nguyên. Mọi thứ đều hiển nhiên ở đây: nếu bạn đang tạo một trang web giáo dục cho trẻ em tuổi mẫu giáo, thì văn bản của giao diện nên được viết bằng ngôn ngữ "trẻ con". Nếu bạn có chương trình dành cho quản trị viên web nâng cao, thì bạn có thể sử dụng các thuật ngữ cụ thể một cách an toàn mà không cần giải thích - đối tượng mục tiêu đã biết chúng. Và nếu đây là dịch vụ dành cho người mới bắt đầu, thì ngôn ngữ phải càng đơn giản càng tốt.

12. Đưa ra số lượng lựa chọn tối ưu.

Bạn càng cung cấp nhiều tùy chọn cho người dùng, họ càng ít có khả năng thực hiện bất kỳ tùy chọn nào. Nếu thực sự có nhiều lựa chọn và không thể rút gọn chúng (ví dụ: danh mục sản phẩm), thì hãy sử dụng chức năng đề xuất. Ví dụ: bạn cung cấp mười tùy chọn sản phẩm trên một trang, nhưng hãy chọn một hoặc hai tùy chọn trong số chúng trong danh mục “Chúng tôi đề xuất”. Khách hàng sẽ chú ý đến những sản phẩm này, điều này có thể giúp họ lựa chọn dễ dàng hơn.

Nó cũng có thể được triển khai bằng cách sử dụng khối "Bán chạy nhất", như được minh họa trong ví dụ.

13. Đưa ra những lời nhắc nhở nhẹ nhàng.

Chú giải công cụ là tuyệt vời. Chúng giúp người dùng hiểu đầy đủ những gì anh ta không thể tự mình tìm ra. Câu hỏi chính những gì còn lại là làm thế nào để thực hiện những lời nhắc như vậy hiệu quả và không gây căng thẳng. Nhớ chiếc kẹp giấy thuở ban đầu Các phiên bản của Microsoft Từ? Công ty đã tắt tính năng này chính xác vì nó gây ra nhiều cảm xúc tiêu cực từ người dùng và bị chỉ trích.

Để giữ người dùng trung thành với các mẹo này, hãy tuân thủ các điểm sau:
- không viết quá nhiều văn bản trong đó;
- không kết nối gợi ý cho từng nút, nhưng chỉ giới hạn ở những nơi mà người dùng thực sự có thể gặp khó khăn;
- Cho phép người dùng đóng gợi ý hoặc tắt hoàn toàn chức năng gợi ý.

14. Làm tối nền dưới các cửa sổ modal.

Một cửa sổ phương thức chặn công việc của người dùng cho đến khi anh ta đóng cửa sổ này hoặc thực hiện một số hành động trong đó. Một cửa sổ như vậy cần phải được làm nổi bật bằng cách nào đó trong bức tranh tổng thể. Cách tốt nhất để làm điều này là làm tối nền bên dưới nó. Nền càng tối thì cửa sổ phương thức càng được nhấn mạnh và người dùng sẽ hiểu rằng anh ta cần thực hiện một số thao tác trong đó.

Trên một số trang web, tôi đã thấy rằng nền bên dưới cửa sổ phương thức trở nên hoàn toàn tối và không thể đọc được. Đây chỉ là một ví dụ về khả năng sử dụng không chính xác của trang web, vì có vẻ như bạn đã kết thúc trên một số trang khác. Các ví dụ dưới đây cho thấy cách bạn có thể làm nổi bật cửa sổ phương thức bằng cách làm tối nền nhưng vẫn có thể đọc được.

15. Có các mẫu đăng ký ngắn.

Yêu cầu người dùng đăng ký là một trong những nhiệm vụ quan trọng và khó khăn nhất của giao diện. Thông thường mọi người cố gắng tránh đăng ký nơi họ sẽ không đến thăm thường xuyên, hoặc không chắc chắn về điều đó. Và thường họ thậm chí từ chối mua hàng trong cửa hàng trực tuyến, nếu điều này đòi hỏi phải đăng ký bắt buộc, và đi tìm hàng của họ trên các trang khác. Để người dùng không cảm thấy thù địch với quá trình đăng ký, bạn cần thực hiện nhanh và dễ dàng nhất có thể. Không sử dụng các biểu mẫu đăng ký dài mà bạn cần nêu toàn bộ tiểu sử của mình. Giới hạn bản thân ở những dòng cơ bản nhất:

Và nếu vì lý do nào đó, bạn phải cung cấp cho người dùng một biểu mẫu dài với nhiều điểm điền, thì hãy chia nó thành các phần riêng biệt.

Hãy xem một ví dụ. Biểu mẫu bên trái hiển thị tất cả các dòng cần điền cùng một lúc và do đó trông cồng kềnh. Tôi thực sự không muốn điền vào một mẫu đơn như vậy. Và trong biểu mẫu bên phải có thể có số lượng câu hỏi chính xác như nhau, nhưng chúng được chia thành các "bước", vì vậy chúng không gây khó chịu.

16. Có các nguyên tắc đơn giản để điền vào các trường.

Hầu hết mọi trang web đều nhắc người dùng điền thông tin vào đó. Ngoài đăng ký trên trang, đây có thể là hình thức đặt hàng, bạn vui lòng để lại thông tin liên hệ hoặc tham gia khảo sát. Nếu bạn làm cho biểu mẫu quá phức tạp hoặc căng thẳng, sẽ không có ai điền vào. Một số mẹo quan trọng sau đây:

1. Khi điền vào các trường khác nhau (“thành phố”, “đường phố”, “ngày sinh”), tốt hơn là đưa ra gợi ý cho người dùng bằng cách sử dụng trình đơn thả xuống (trình đơn thả xuống) để họ không cần nhập tất cả điều này theo cách thủ công, nhưng chỉ cần chọn tùy chọn mong muốn từ danh sách ...

2. Nếu người dùng vẫn cần nhập dữ liệu của mình theo cách thủ công, thì hãy sử dụng hệ thống từng dòng để kiểm tra xem biểu mẫu đã được điền chính xác chưa. Sẽ không ai thích điều đó nếu sau mỗi lần điền lỗi, hệ thống sẽ đặt lại tất cả các dòng đã được điền trước đó.

3. Tên trường tốt nhất nên đặt phía trên các dòng nhập liệu. Nó liên quan đến nhận thức thị giác của con người. Một người cảm nhận thông tin từ trên xuống hoặc từ dưới lên trên dễ dàng hơn là từ trái sang phải hoặc ngược lại.

4. Giảm thiểu khả năng điền sai vào biểu mẫu.
Hãy tưởng tượng tình huống. Bạn bắt đầu nhập số điện thoại của mình vào ô trống. Sau lần điền đầu tiên, hệ thống cho bạn biết: “Số điện thoại phải được nhập ở định dạng 10 chữ số”. Bạn nhập lại, hệ thống đưa ra thông báo: "Số điện thoại không được có dấu gạch ngang". Và sau đó bạn sẽ bắt đầu lo lắng và tinh thần nguyền rủa trang web này (hoặc có thể không tinh thần). Hình dáng hoàn hảođầu vào là khi người dùng có thể viết bất cứ thứ gì vào đó và hệ thống sẽ không nói với anh ta là "sai". Tất nhiên, việc xử lý dữ liệu sẽ hơi khó khăn, vì bạn sẽ phải xử lý một số yêu cầu theo cách thủ công. Nhưng mục tiêu chính của bạn là nhận đơn đặt hàng chứ không phải loại bỏ những khách hàng thiếu kiên nhẫn.

17. Cung cấp các tùy chọn điều khiển thuận tiện.

Nếu trên các trang web, chúng tôi chủ yếu sử dụng chuột (ngoại trừ chức năng tiêu chuẩn“Sao chép / dán”, v.v.), thường thuận tiện để điều khiển từ bàn phím trong các chương trình và ứng dụng. Cho phép người dùng chọn loại điều khiển mà họ thích nhất và hiển thị chức năng nào tương ứng với tổ hợp phím nào.

Làm thế nào để kiểm tra giao diện về khả năng sử dụng?

Như tôi đã hứa ở đầu bài viết, tôi sẽ cho bạn biết một chút về việc thử nghiệm giao diện. Tại sao nó quan trọng như vậy?
- thứ nhất, trong quá trình phát triển giao diện, các lỗi có thể xâm nhập vào đó sẽ ảnh hưởng đến hoạt động của toàn bộ chương trình hoặc tài nguyên;
- thứ hai, bạn sẽ không bao giờ đoán được ngay với thiết kế giao diện tối ưu, sẽ được đa số người dùng cảm nhận một cách hoàn hảo nhất;
- thứ ba, giao diện có thể được hiển thị bình thường trên một thiết bị (hoặc trong trình duyệt) và hoàn toàn không tương thích với thiết bị khác.

Thử nghiệm có thể giải quyết tất cả những vấn đề này. Nó được hoàn thiện bằng cách nào?

1. Bằng tay.

Việc kiểm tra như vậy sẽ đòi hỏi nhiều thời gian và nguồn lực vật chất, vì toàn bộ quá trình sẽ do một người thực hiện. Nhưng đây cũng là một điểm cộng của thử nghiệm thủ công. Để triển khai nó, bạn cần một người kiểm tra, người sẽ từng bước kiểm tra cách hệ thống phản ứng với một hành động cụ thể của người dùng. Cách thuận tiện nhất để làm điều này là tạo một bảng đặc biệt, trong đó tất cả dữ liệu sẽ được nhập vào. Ví dụ, cái này:

2. Theo cách tự động.

Phương pháp kiểm tra này được thực hiện với sự trợ giúp của các công cụ phần mềm đặc biệt, giống như nó, bắt chước các hành động của một người sống trong quá trình kiểm tra thủ công. Việc kiểm tra này không cần đến sự can thiệp của con người nên tốc độ kiểm tra được tăng lên và giảm chi phí về tiền bạc. Có một chữ “nhưng” lớn ở đây. Kiểm tra tự động không thể đưa ra kết quả 100%, vì nó chỉ được thực hiện trên cơ sở chính thức (những thứ được đưa vào chương trình) và không mang lại cơ hội để tìm ra những khiếm khuyết về khả năng sử dụng mà chỉ một người mới có thể nhận ra (ví dụ: bảng màu của giao diện).

3. Sử dụng các nhóm tiêu điểm.

Theo tôi, nhiều nhất phương pháp tốt nhất thử nghiệm về tỷ lệ giá cả hiệu suất. Nó được thực hiện như sau:
- Một số nhóm tập trung được tuyển dụng, bao gồm những người dùng mục tiêu của bạn. Bạn có thể chia nhóm theo các tiêu chí khác nhau: người dùng đã đăng ký / chưa đăng ký, người dùng thường xuyên / hiếm, cũng như theo các chỉ số nhân khẩu học khác nhau (phù hợp với đối tượng mục tiêu của bạn);
- mỗi nhóm được giao nhiệm vụ để thực hiện các hành động nhất định trên trang web / dịch vụ / chương trình của bạn. Bạn phải nói cho đối tượng biết họ nên làm gì, nhưng không nói làm thế nào. Đây là bản chất của thử nghiệm - để xem người dùng sẽ sử dụng những hành động nào để đạt được mục tiêu của họ.
- sau tất cả điều này, bạn phân tích chính xác cách các đối tượng thực hiện nhiệm vụ của họ - nơi họ nhấp vào, liên kết nào họ theo dõi, liệu họ có nhanh chóng tìm thấy thứ họ muốn không, v.v.

Có những dịch vụ đặc biệt, với sự trợ giúp của bạn, bạn có thể dễ dàng tìm thấy những người để tiến hành thử nghiệm như vậy. Ví dụ, Askusers, Test Wise, Usabilla.

Ví dụ minh họa về thử nghiệm giao diện người dùng

Đối với thử nghiệm khả năng sử dụng, những người dùng không thường xuyên sử dụng Yelp đã tham gia. Họ được giao một số nhiệm vụ nhất định (ví dụ: đặt bàn trong nhà hàng, chọn khách sạn để nghỉ qua đêm khi đi du lịch, v.v.), sau đó hành động của họ được phân tích. Dưới đây là một số kết quả thử nghiệm:

1. Khi phát hiện ra, người dùng thường thích sử dụng biểu mẫu tìm kiếm để tìm địa điểm mà họ quan tâm hơn là tìm kiếm theo danh mục. Do đó, nó đã được quyết định thực hiện một cuộc tìm kiếm chức năng chính Trên trang. Từ một trang như thế này:

Nó thành ra như thế này:

2. Một cuộc khảo sát về những người dùng được thử nghiệm cho thấy rằng hầu hết mọi người trong số họ đều xem xét bảng điều khiển bên dịch vụ rất lộn xộn và bất tiện khi sử dụng. Ban đầu, trang này giống như sau:

Và đây là bố cục của trang mới:

Xem phiên bản đầy đủ của các kết quả của thử nghiệm này.

Tóm lại là.

Khi thiết kế giao diện, hãy nhớ rằng quá chú ý đến một đặc điểm có thể gây hại đáng kể cho đặc điểm khác. Bằng cách loại bỏ một số yếu tố trong nỗ lực đạt được sự tối giản, bạn có thể tạo ra vấn đề với sự hiểu biết về giao diện người dùng. Bằng cách thể hiện đặc điểm của thiết kế hấp dẫn, bạn có nguy cơ lạm dụng nó và làm cho giao diện quá nặng đối với tải nhanh... Do đó, điều quan trọng nhất (và khó nhất) trong toàn bộ câu chuyện này là duy trì sự cân bằng hoàn hảo của tất cả các thuộc tính của giao diện, và sau đó nó sẽ thực sự thân thiện với người dùng.

Tôi rất quan tâm đến chủ đề của một giao diện trực quan trong bối cảnh hiểu biết hàng ngày và chuyên nghiệp. Tôi thậm chí còn thu thập ý kiến ​​từ các nhà thiết kế khác nhau về chủ đề này :)

Hãy để tôi trích dẫn một vài trích dẫn từ bộ sưu tập của tôi.

Victor Papanek:
Thiết kế là một nỗ lực có ý thức và trực quan để tạo ra trật tự có ý nghĩa.

Tôi thấy cần phải thêm từ "trực quan" vào định nghĩa của tôi về thiết kế chỉ trong những năm trước... Ý thức liên quan đến trí tuệ hóa, làm việc trí não, nghiên cứu và phân tích. Định nghĩa ban đầu thiếu cảm giác / cảm giác của quá trình sáng tạo. Thật không may, trực giác rất khó để định nghĩa là một quá trình hay khả năng. Tuy nhiên, tác động của nó đối với thiết kế là đáng kể. Rốt cuộc, chính nhờ vào sự thấu hiểu trực quan mà chúng ta có thể hình dung cách những ấn tượng, ý tưởng và suy nghĩ đó tương tác với nhau mà chúng ta đã tích lũy một cách không thể nhận thấy ở cấp độ tiềm thức, vô thức hay tiền thức. Cơ chế của tư duy trực quan trong thiết kế rất khó phân tích, nhưng có thể giải thích bằng một ví dụ. Watson và Crick trực giác cảm thấy rằng cấu trúc của phân tử DNA có thể được thể hiện một cách duyên dáng nhất theo hình xoắn ốc. Với trực giác này, họ bắt đầu nghiên cứu. Dự đoán bản năng đã trở thành sự thật: DNA thực sự là một hình xoắn ốc!

Vlad Golovach:
Ý kiến ​​của Vlad có thể được đọc trong blog của tôi
http://valiullin.livejournal.com/14635.html
Tôi không đề cập đến nó ở đây, bởi vì bối cảnh là quan trọng ở đó.

Alan Cooper:
Khi các đồ vật có hình dạng rõ ràng là phù hợp với thao tác trực tiếp của chân hoặc tay, chúng ta biết mà không cần hướng dẫn bằng văn bản phải làm gì với nó. Hiểu cách xử lý một công cụ có hình dạng giống bàn tay người là một ví dụ tuyệt vời về việc nắm bắt giao diện một cách trực quan.

Jeff Raskin:
Một trong những thuật ngữ đáng khen ngợi nhất được sử dụng cho các giao diện là trực quan. Khi xem xét kỹ hơn, khái niệm này biến mất hoàn toàn giống như một quả bóng trong ống nhỏ, và được thay thế bằng thuật ngữ đơn giản hơn "quen thuộc".

Khi người dùng nói rằng một giao diện nhất định là trực quan, có nghĩa là nó hoạt động giống như bất kỳ phương pháp hoặc chương trình nào khác mà họ quen thuộc.

Gần đây, tôi đã tìm thấy câu nói của Bruce Ediger hoặc Steve Jobs (không xác định được tác giả):
Giao diện "trực quan" duy nhất là núm vú. Sau đó, tất cả đều đã học được.
Chỉ có núm vú là có giao diện trực quan. Tất cả những thứ còn lại cần được nghiên cứu (bản dịch miễn phí của tôi).

Đối với tôi, dường như nhận ra khái niệm về giao diện trực quan có tồn tại hay không là một tình huống quan trọng đối với một nhà thiết kế giao diện.

Về vấn đề này, tôi muốn hỏi bạn Artyom, bạn nghĩ gì về giao diện trực quan?

Đánh giá câu trả lời của bạn, ý kiến ​​của Alan Cooper gần với bạn. Nhưng tôi gần gũi hơn với ý kiến ​​của Jef Raskin với một điều khoản nhỏ của Ediger-Jobs, về núm vú giả.

Giao diện là một đặc biệt phần mềmđóng vai trò như một đầu ra hình ảnh đồ họa và cho phép trao đổi dữ liệu giữa người dùng với máy tính hoặc thiết bị kỹ thuật khác.

Giao diện là gì?

Nhiều nhất ví dụ đơn giản giao diện là điều khiển từ xa điều khiển từ xa... Công cụ kỹ thuật này giúp tương tác và “giao tiếp” giữa TV và con người. Các ví dụ khác là bảng điều khiển trên ô tô, đòn bẩy trên máy bay, v.v. Mặc dù có phạm vi khá rộng nhưng khi đặt câu hỏi, "Giao diện là gì?" trong hầu hết các trường hợp, mọi người có liên kết với máy tính, điện thoại di động và các thiết bị kỹ thuật khác thuộc loại này.

Giao diện là một tập hợp các phần tử khác nhau, bản thân các phần tử này cũng có thể có cấu trúc nhiều cấp phức tạp. Ví dụ, một màn hình hiển thị bao gồm các cửa sổ bao gồm các bảng, nút cụ thể, v.v. Đặc điểm chính của phần sụn là tính hiệu quả và dễ sử dụng. Dựa trên điều này, giao diện thường được định vị là thuận tiện, thân thiện với người dùng, dễ hiểu, trực quan, v.v.

Những thành phần chính

Để hiểu giao diện là gì, bạn cần hiểu các yếu tố cơ bản của nó. Bộ của họ phụ thuộc vào những gì chính xác người sử dụng. Ví dụ: nếu đây là chương trình máy tính, thì điều này bao gồm bảng ảo, các nút, cửa sổ và các thành phần tương tự khác. Ngoài ra, giao diện có thể tương tác, có nghĩa là, để tác động đến một người bằng cách sử dụng các âm thanh, tín hiệu, đèn, động cơ rung khác nhau, v.v. Đối với người dùng trực tiếp, anh ta có thể tương tác với giao diện bằng cách sử dụng các công tắc, đòn bẩy, nút hoặc thậm chí là một số cử chỉ và lệnh thoại.

Cấu trúc khái niệm

Thông thường, một giao diện được hiểu là vẻ bề ngoài các chương trình. Điều này không hoàn toàn đúng, vì ngoài các đặc điểm trực quan, khái niệm kỹ thuật này bao gồm một tập hợp các chức năng và yếu tố bổ sung. Dưới đây là một số trong số chúng:

• Công nghệ thông tin đầu vào.
• Phương pháp xuất dữ liệu.
• Nhiệm vụ của người dùng.
• Các yếu tố khác nhau cho phép bạn kiểm soát chương trình.
• Phản hồi.
• Các yếu tố điều hướng giữa các cấu trúc và thành phần khác nhau của chương trình.
• Công cụ để hiển thị đồ họa các lệnh.

Yếu tố cần thiết

Trong hầu hết các trường hợp giao diện tiêu chuẩn thiết bị kỹ thuật bao gồm các yếu tố sau:

• Cái nút. Nó có thể là đôi, cờ, v.v.
• Biểu tượng hoặc biểu tượng.
• Danh sách thuần túy hoặc phân cấp.
• Các trường để chỉnh sửa.
• Menu, có thể là menu chính, theo ngữ cảnh và menu thả xuống.
• Các tấm khác nhau.
• Tab, nhãn và chú giải công cụ.
• Windows, đặc biệt là các hộp thoại.
• Thanh cuộn, thanh trượt, v.v.

Các yếu tố bổ sung

Ngoài các thành phần chính trên, giao diện có thể có và các yếu tố bổ sung không được sử dụng trong tất cả thiết bị kỹ thuậtỒ.

• Chỉ báo mức độ. Cho phép bạn theo dõi một giá trị cụ thể.
• Các yếu tố quay số tuần tự.
• Các quầy khác nhau.
• Hiển thị thông tin trên tất cả các thành phần khác.
• Các yếu tố giao diện ẩn biến mất khi không sử dụng, v.v.

Phân loại

Đối với phân loại, sau đó, tùy thuộc vào các tiêu chí nhất định, phân biệt các loại khác nhau các giao diện. Hơn nữa, hầu như hàng năm số lượng và cơ cấu của chúng đều thay đổi và cải thiện. Dưới đây là các loại phổ biến nhất.

1. Giao diện lệnh. Công cụ kỹ thuật này dựa trên đầu vào của các lệnh nhất định và trình tự của chúng. Một cửa sổ đặc biệt được hiển thị trên màn hình thiết bị, nơi người dùng nhập một lệnh cụ thể và nhận kết quả tương ứng. Loại này giao diện ít thuận tiện hơn cho người dùng bình thường, vì nó đòi hỏi kiến ​​thức về các lệnh và quá trình nhập chúng.
2. Giao diện menu. Trong trường hợp này, các ví dụ về lệnh và menu với các thao tác cụ thể được hiển thị trên màn hình của thiết bị kỹ thuật. Để chọn lệnh cần thiết, bạn chỉ cần di chuyển con trỏ đến một ký hiệu nhất định và xác nhận các thao tác của mình. Hiện tại, đây là cách giao tiếp phổ biến nhất giữa máy tính và người dùng. Loại này giao diện không yêu cầu kiến ​​thức đặc biệt và ngay cả một đứa trẻ cũng có thể làm việc theo cách này.
3. Giao diện lời nói. Cho phép bạn chuyển đổi giữa các lệnh và hành động cụ thể bằng hướng dẫn bằng giọng nói. Hình thức giao tiếp thuận tiện và hứa hẹn nhất giữa máy tính và người dùng. Hiện tại, nó vẫn chưa phổ biến, nó hiện diện chủ yếu ở các thiết bị kỹ thuật đắt tiền.

Giao diện người dùng

Khái niệm này bao gồm một tập hợp phức tạp các phần tử mà người dùng nhìn thấy trên màn hình và tương tác với máy tính. Kết quả hoạt động của con người phụ thuộc vào mức độ thuận tiện khi sử dụng. Dựa trên điều này, tất cả các tập đoàn trên thế giới tham gia vào công nghệ máy tính, đặc biệt chú ý không chỉ đến quá trình viết chương trình, mà còn để tối ưu hóa chúng cho nhu cầu của các nhóm người dùng cụ thể. Các nhà thiết kế, nghệ sĩ và thậm chí cả các nhà tâm lý học làm việc trên thiết bị giao diện và nó được phát triển có tính đến các yêu cầu đặc biệt của con người, khả năng thể chất, tình trạng sức khỏe của họ, v.v.

Khái niệm giao diện song song và nối tiếp

Đối với máy tính và những người khác thiết bị tương tự vai trò quan trọngđóng nhiệm vụ truyền dữ liệu với một lượng nhất định. Để truyền dữ liệu thành một nhóm bit, có hai cách tiếp cận đối với cấu trúc và tổ chức của giao diện:

1. Giao diện song song... Theo phương án này, mỗi bit trong nhóm được truyền sử dụng đường tín hiệu riêng của nó và tất cả chúng đều được truyền cùng nhau tại một thời điểm cụ thể. Một ví dụ là cổng kết nối máy in.
2. Giao diện nối tiếp... Trong trường hợp này, chỉ một đường tín hiệu được sử dụng và các bit được truyền lần lượt, nối tiếp nhau, với một khoảng thời gian nhất định được phân bổ cho từng bit. Thí dụ - xe buýt nối tiếp USB.

Mỗi loại giao diện này đều có ưu và nhược điểm. Mặc dù thực tế là sử dụng tùy chọn song song đơn giản hơn và sửa chữa nhanh chóng, việc thực hiện nó đòi hỏi một số lượng lớn dây và cáp. Đường truyền giao diện nối tiếp có nhiều hơn cấu trúc phức tạp, tuy nhiên, rẻ hơn nhiều. Theo đó, nếu đường dây cần kéo trên một quãng đường dài thì kéo dây nối tiếp sẽ có lợi hơn nhiều so với nhiều dây song song.

Thay cho lời bạt

Như vậy, giao diện đóng vai trò trung gian giữa máy tính hoặc thiết bị kỹ thuật khác và người dùng. Chất lượng công việc với thiết bị này phụ thuộc vào mức độ thuận tiện và dễ dàng khi vận hành. Để cuối cùng hiểu giao diện là gì, bạn cũng nên nghiên cứu phân loại, các khái niệm cơ bản và các thành phần cơ bản của nó. Hàng năm, giao diện của các thiết bị kỹ thuật khác nhau đang được cải tiến, cách tiếp cận cấu trúc và chức năng chính của chúng cũng thay đổi.