Giao diện là gì? Khái niệm, các loại và cấu trúc. Thiết kế web trực quan: cách tạo trang đích thân thiện với người dùng

Trong thời gian làm việc tương đối ngắn của mình (khoảng 6 năm), tôi khá thường xuyên 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 một giao diện rõ ràng trực quan "và như vậy. 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.
Nó sẽ được thảo luận thêm về cô ấy.

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 (Trực giác tiếng Latinh muộn - “sự suy ngẫm”, từ intueor động từ - tôi nhìn kỹ lại) - một phương pháp giải quyết vấn đề thông qua một kết luận tiềm thức một lần, dựa trên trí tưởng tượng, sự đồng cảm và kinh nghiệm trước đó, "cảm nhận", cái nhìn sâu sắc.

"Wikipedia"

Trực giác (từ intueri trong tiếng Latinh - để xem xét kỹ lưỡng, cẩn thận) là một quá trình suy nghĩ bao gồm việc tìm ra giải pháp cho một vấn đề gần như tức thời mà không có đủ nhận thức về các kết nối logic.

Trực giác (từ intueri trong tiếng Latinh - để xem xét kỹ lưỡng, cẩn thận) là kiến ​​thức nảy sinh mà không nhận thức được các cách thức và điều kiện để đạt được nó, do đó chủ thể có được nó như là kết quả của "sự quyết định trực tiếp"

Và mỗi cách này đều được phản ánh trong quá trình lập trình, 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 đoạn mã ví dụ bằng ngôn ngữ Sidef (hy vọng không nhiều bạn biết). Hãy thử không thực sự đi sâu vào chi tiết, hãy đoán xem nó là 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 nội dung của nó bằng cách nhìn thấy các phần quen thuộc trong mã, có thể một số không. Tôi đã cố gắng thực hiện thử nghiệm này trên một nhóm nhỏ các lập trình viên đồng nghiệp của mình và kết quả là hơn một nửa (khoảng 65%) người có thể hiểu những gì đang bị đe dọa 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 giả định nó là gì.”

Do đó, bằng cách 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 liên quan đến 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 có kinh nghiệm hơn đều có "cảm nhận" nhất định về 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 quan” cảm thấy kết quả của việc thực thi hàm cuối cùng trong danh sách sẽ như thế nào.

Đ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ả thu được 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, menu ở bên trái, thì người dùng cuối có thể hơi bối rối vì "trực giác" cho anh ta biết rằng menu phải ở trên cùng.

Nhưng tại sao đôi khi khi chúng ta truy cập vào một trang web có 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 thật bắt mắt hoặc 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 chính xác là thứ đượ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à điều kỳ diệu là 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 trên những quyết định mang 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 đó “ma thuật” 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 khi đưa ra các quyết định tiếp theo. Sự chiếm ưu thế của cảm giác, cảm giác, tính không hợp 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à - làm phức tạp thêm 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

Mọi người sử dụng nhiều thiết bị và hệ thống khác nhau để thực hiện công việc của họ. Kể từ khi máy tính ra đời, phần lớn thời gian của chúng ta dành cho việc tương tác với các giao diện chương trình. Và khi tôi đặt ra thuật ngữ "giao diện trực quan" ...

Nhưng từ "trực quan" có nghĩa là gì? Hầu hết các giao diện được xây dựng dựa trên phép ẩn dụ, tức là về việc sử dụng các đồ vật và kỹ thuật đã quen thuộc. Đó là lý do mà các biểu tượng được vẽ để trông giống như các đối tượng thực. Nhưng ẩn dụ không phải lúc nào cũng có và xa tất cả các khái niệm đều có thể được sử dụng. Giả sử hình ảnh kính lúp có thể có cả chức năng tìm kiếm và chức năng xem trước bản in. Và, trong trường hợp không có phép ẩn dụ phù hợp hoặc nó mơ hồ, người ta phải sử dụng nạng dưới dạng chú giải công cụ, hoặc nghĩ ra những hình ảnh mới không có trong thế giới thực.

Ngay sau khi một cái gì đó mới và không quen thuộc xuất hiện, thì tất cả tính trực quan sẽ biến mất - nó là bắt buộc giáo dục và sau đó có một thứ như đường cong học tập liên quan trực tiếp đến chất lượng của giao diện. Giao diện càng phức tạp, càng mất nhiều thời gian để làm chủ nó và càng ít người về đích, điều này có nghĩa là nhiều người sẽ phải chết vì sử dụng chương trình không hiệu quả.

Nhưng giao diện nên phức tạp hay đơn giản như thế nào? Câu trả lời không đơn giản như vậy và phụ thuộc vào mức độ phức tạp của vấn đề đang được giải quyết. Giao diện, trước hết, phải phù hợp với nhiệm vụ đang được giải quyết! Các vấn đề nảy sinh khi chúng ta quá phức tạp hóa một nhiệm vụ hoặc đơn giản hóa nó quá mức. Sự phức tạp thường phổ biến hơn nhiều.

Dù bạn thông minh đến đâu, nhưng nếu bạn không có kiến ​​thức về một lĩnh vực nào đó, chẳng hạn như hóa học hữu cơ, thì chương trình vẽ công thức hóa học khó có vẻ trực quan với bạn. Và ở đây chúng ta đi đến một hệ quả rất quan trọng - giao diện phải giúp sử dụng kiến ​​thức, nhưng không thay thế nó.

Bất kỳ chương trình nào cũng được thiết kế để giải quyết một vấn đề cụ thể và giả định rằng người dùng có một số kỹ năng nhất định. Trên cơ sở này, có thể phân biệt chương trình chuyên nghiệp và chương trình thông thường. Giao diện của cái trước đây thường khá phức tạp và cần được đào tạo sơ bộ đặc biệt. Các chương trình này bao gồm: Adobe PhotoShop, Autodesk AutoCAD, các ngôn ngữ và môi trường lập trình khác nhau. Các nhiệm vụ mà chúng giải quyết rất phức tạp và do đó giao diện của các chương trình như vậy cũng phức tạp, nhưng khi đã thành thạo, nó bắt đầu mang lại các chuyên gia cổ tức của họ bằng cách tăng tốc công việc.

Mặt khác, có một loại chương trình mục đích chung lớn hơn nhiều không áp đặt bất kỳ yêu cầu đặc biệt nào đối với người dùng. Các chương trình như vậy thường sử dụng cụm từ "giao diện trực quan" trong mô tả của chúng. Nhưng trên thực tế, mọi thứ ở đây tồi tệ hơn nhiều và thời gian dành cho một giao diện thuận tiện ít hơn nhiều so với trong các chương trình chuyên nghiệp. Cụm từ "không có yêu cầu đặc biệt đối với người dùng" nên được coi là thực tế là mỗi nhà sản xuất phần mềm diễn giải các kỹ năng người dùng cơ bản theo cách riêng của họ.

Rất thường có sự thay thế khái niệm về sự thuận tiện của giao diện, việc sử dụng các nút, danh sách thả xuống, hộp kiểm và các yếu tố khác của giao diện đồ họa của hệ điều hành. Bất kỳ chương trình nào được thiết kế để thực hiện một nhiệm vụ rất cụ thể, do đó, trước khi thiết kế một giao diện, nhiệm vụ này phải được xác định và hiểu rõ. Nhưng xét cho cùng, cùng một nhiệm vụ được giải quyết bởi những người khác nhau theo những cách hoàn toàn khác nhau - tùy thuộc vào mức độ hiểu biết của họ.

Giả sử có thể tạo mã hóa MP3 gần như hoàn hảo bằng cách sử dụng nhiều cài đặt kỹ thuật khác nhau được cung cấp trong codec, nhưng trong 95% trường hợp người dùng cần chỉ cần mã hóa cd âm thanh nàyở chất lượng bình thường. Và tất cả những gì họ cần cho việc này chỉ là một chương trình với một nút "Tạo MP3" lớn. Nhưng điều này có nghĩa là một chương trình như vậy không thích hợp cho việc sử dụng chuyên nghiệp? Không hề, chỉ là giao diện nên được thiết kế để che đi sự phức tạp không cần thiết. Nếu chúng ta lấy ví dụ trên với mã hóa sang MP3, thì giải pháp cho vấn đề này được thực hiện một cách đáng kể bằng cách sử dụng cơ chế hồ sơ, bao gồm các cài đặt tối ưu cho chất lượng mã hóa cụ thể. Và để làm cho chương trình này chuyên nghiệp hơn, chỉ cần cung cấp một cơ chế để chỉnh sửa các cấu hình này là đủ.

Vấn đề của việc tạo giao diện của các lập trình viên là họ được hướng dẫn chủ yếu bởi trình độ kiến ​​thức và kỹ năng của họ. Nhưng xét cho cùng, một lập trình viên còn lâu mới trở thành một người sử dụng chương trình bình thường và mức độ hiểu biết của anh ta cao hơn một bậc. Hơn nữa, một số hành động tưởng chừng như nhỏ nhặt đối với anh ta lại không hề tầm thường đối với những người khác. Vì lý do này, khi phát triển các chương trình, cần có sự tham gia của "người dùng bình thường" vào quá trình thử nghiệm của họ và cẩn thận xem họ làm như thế nào và làm gì. Để giải quyết vấn đề tạo ra một giao diện thân thiện với người dùng, các tập đoàn lớn phân bổ nhiều triệu đô la, và bất kỳ giải pháp thực sự thành công nào được tìm thấy sau đó đều nhanh chóng được mọi người sao chép.

Đâ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 một trang web. Đây là cách chúng tôi tiếp cậ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 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 nhiệm vụ chuyển đổi mà không bị phân tâm một giây bởi suy nghĩ. Giao diện trực quan là giao diệ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 tích cực (User eXperience, UX), xét cho cùng, 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ân vân về 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à những gì mọi người 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à việc 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ốn dĩ đã khác nhau, có mức độ trải nghiệm người dùng khác nhau và những gì trông đơn giả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 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ó hiểu những gì cần làm 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. Những cuộc đổ bộ này thậm chí trực giác- nhưng thường là 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 đó là trang đích độc lập hay 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ó cùng trình độ kỹ năng máy tính, kinh nghiệm sử dụng giao diện loại này tương đương nhau, v.v.

Điều quan trọng là phải hiểu điều này: sự phát triển của 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 phải 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 hiện tại VS Kiến thức cần thiế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ố mức 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 người dùng web nổi tiếng, gọi là "Kiến thức hiện tại".

Sau đó, “Kiến thức mục tiêu” là mức độ đủ điều kiện 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 là nhà thiết kế có thể làm việc cho một nhà tiếp thị có đối tượng mục tiêu cực kỳ rộng, từ những người "sành sỏi" về công nghệ cho đến những bà nội không có kỹ năng máy tính, cộng với tất cả những người dùng nằm giữa hai cực này. nhóm kỹ năng.

Nhóm càng nhỏ, nhiệm vụ của nhà 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ụ thể 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ề vấn đề này là 0: rất có thể họ đã truy cập các trang web tương tự khác trước đây. Một số người trong số họ không, nhưng trên thực tế, mỗi người trong số họ đều có Mô hình khái niệm về tài nguyên web lý tưởng.

Để làm rõ với 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 ấy ngồi trước máy tính, cho anh ấy xem giao diện web Amazon.com và nói, "Bạn có thể mua sắm ở đây!"

Bây giờ người này cùng với mô hình khái niệm "cửa hàng ngoại tuyến", có mô hình khái niệm "cửa hàng trực tuyến". Quá trình mua sắm trực tuyến càng giống mua hàng thông thường, thì mô hình hành vi "mua hàng" của người dùng gắn với một 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ì có 2 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 giải pháp đổ bộ / trang web / SaaS tương tự về mặt hình ảnh 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 khu đất / địa điểm càng giống với của bạn càng tốt - và cứ thế tiếp tục như vậy khi họ chuyển sang điểm tương đồng về 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 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 cho là "trực quan", bạn cần đá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 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 sống” thông thường của họ. Điều này là khá đủ để có được một ý tưởng về mức độ 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 thành viê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 thành tiếng 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ũng 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à đủ để tìm ra 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 đó, đã nghiên cứu về chủ đề này vào năm 2005, dẫn đến bài báo “Điều gì tạo nên thiết kế trực quan?” (Điều gì làm cho một thiết kế có vẻ "trực quan"?).

Trong đó, Jared tuyên bố đã phát hiện ra hai điều kiện mà người dùng tin rằng 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, tham gia vào 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 dướ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 thấy điều này, thu hẹp khoảng cách kiến ​​thức với sự trợ giúp của những lời nhắc không thể nhận thấy. Người dùng tự nhiên trải qua quá trình đào tạo mà không nhận thức được điều đó.

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 các tác vụ chuyển đổi không yêu cầu khách truy cập phải tìm hiểu hoặc 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ự có thể đào tạo người dùng khi đang di chuyển.

Bằng chứng rõ nhất về tính đúng đắn của 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” (Learning Curve) - bất kỳ người dùng nào, ngay cả với trình độ kiến ​​thức tối thiểu, đều hiểu phải làm gì.

Một xác nhận tốt về điểm thứ hai là giải pháp SaaS để tạo các dạng khách hàng tiềm năng Wufoo. 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 tinh tế sẽ bắt đầu với những hướng dẫn đơn giản.

Nó chỉ ra rằng có hai cách để tạo ra một 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 thiết kế thực tế cho đến khi nó đáp ứng 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, cả hai phương pháp này có thể được sử dụng 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 về, đã tạo ra một biểu đồ hình tròn minh họa rõ ràng các yêu cầu mà khách truy cập đưa ra đối với thiết kế tài nguyên web (rõ ràng là biểu đồ này là kết quả của quá trình nghiên cứu sâu rộng).

Vì vậy, theo biểu đồ này, 76% người được hỏi coi việc dễ dàng tìm kiếm nội dung là yếu tố quan trọng nhất trong việc thiết kế tài nguyên (nghiên cứu này nói chung 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à nơi mà câu hỏi chính nằm ở chỗ: nếu trang web của bạn có một lượng lớn nội dung, thì làm thế nào để cấu trúc / lập danh mục một cách chính xác?

Pip Laja khuyên nên sử 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 sắp xếp nội dung thẻ” (Phân loại thẻ), tương tự như một trò chơi bài thực với các quy tắc đơn giản: những người tham gia thử nghiệm được phát thẻ các tông có tên danh mục: “ linh tinh ”,“ hàng gia dụng ”, v.v.

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

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 dứt khoát" (2004) của Donna Spencer, một chuyên gia người Úc về tối ưu hóa trải nghiệm người dùng.

Và cuối cùng, nếu các nhà thiết kế web, khi 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ì có thể các nhà tiếp thị nghĩ rằng ý tưởng của họ về danh mục sản phẩm giố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ặt hàng bằng các từ kích hoạt: “Mua”, “Liên hệ với chúng tôi”, v.v.

Đã đến lúc nhớ đến 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 bởi vì họ không thể tìm thấy những gì họ đang tìm kiếm

Đó 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 cực kỳ quan trọng!

Tài nguyên của bạn nên có một tìm kiếm, và nó, đến lượt nó, phải dễ dàng tìm thấy.

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 bật Tìm kiếm trang web trong chỉ số Google Analytics của mình. Bạn sẽ nhận thấy rằng những người dùng áp dụng các cụm từ 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 họ đang tìm kiếm gì khi họ hỏi 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 của họ để 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 biểu trưng (ở góc trên bên trái) luôn đưa người dùng trở lại trang chính / trang chủ;
• mục cuối cùng trong menu điều hướng ngang phải được gọi là "Liên hệ / Liên hệ với chúng tôi" (hoặc nó là mục dưới cùng của menu dọc);
• thông tin liên hệ nên được đặt ở chân trang (footer, "footer");
• cố gắng đạt được tính 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 ở phía bên trái của trang;
• đặt thông báo trợ giúp và thông báo trên trang theo khối;
• sử dụng những từ dễ hiểu nhất: "Danh bạ" thay vì "Liên lạc".

Đúng, vẫn có những ngoại lệ đối với 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 nào trong thiết kế đều khó khăn và rủi ro. Đừng bơi ngược dòng, đừng sửa những gì chưa hỏng.

Vì vậy, chúng tôi tiếp cận trơn tru điểm cuối cùng của 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 đã công bố 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 quý 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 đang thay đổi nó để chống lại những khách hàng "vàng" nhất, dung hòa 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 suy giảm 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 không suy nghĩ một giây nào, bước vào con đường chuyển đổi..

Bạn nên tập trung vào những người mua / khách hàng quan trọng nhất. 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, cấu hình thấp, lặp đi lặp lại (nói cách khác, tiến hóa, ESR). Phương pháp này sẽ cho phép bạn nhanh chóng phản hồi 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 có vẻ xấu, hãy bắt đầu một cuộc đại tu lớn.

Giao diện là một phần mềm đặc biệt thực hiện chức năng hiển thị hình ảnh đồ họa và cho phép bạn 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ì?

Ví dụ đơn giản nhất về giao diện là đ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 sẽ 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 tưởng 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àn hình hiển thị bao gồm các cửa sổ bao gồm một số bảng, nút, 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, 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à một chương trình máy tính, thì điều này bao gồm nhiều bảng ảo, 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, tức là ảnh hưởng đến một người sử dụng nhiều loại âm thanh, tín hiệu, đèn, động cơ rung, v.v. Đối với bản thân người dùng, anh ta có thể tương tác với giao diện bằng nhiều công tắc, đòn bẩy, nút hoặc thậm chí một số cử chỉ và lệnh thoại.

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

Thông thường, giao diện được hiểu là sự xuất hiện của chương trình. Điều này không hoàn toàn đúng, bởi 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 chương trình khác nhau.
• Công cụ để hiển thị đồ họa các lệnh.

Những yếu tố chính

Trong hầu hết các trường hợp, giao diện tiêu chuẩn của 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.
• Huy hiệu hoặc biểu tượng.
• Danh sách bình thường 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 hoặc menu thả xuống.
• Các tấm khác nhau.
• Tab, nhãn và chú giải công cụ.
• Windows, cụ thể là đối 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ó các thành phần phụ không được sử dụng trong tất cả cá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 phần tử của một tập hợp 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 phần tử giao diện người dùng ẩn biến mất khi không sử dụng, v.v.

Phân loại

Còn về kiểu chữ, tùy theo tiêu chí nhất định mà có các kiểu giao diện khác nhau. Đồng thời, 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 giao diện này í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à quy 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, chỉ cần di chuyển con trỏ đến một ký hiệu cụ thể và xác nhận hành động của bạn. 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 giao diện này 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 giọng nói. Cho phép bạn chuyển đổi giữa các lệnh và hành động nhất định thông qua hướng dẫn bằng giọng nói. Loại 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ó chưa được phổ biến rộng rãi, nó hiện diện chủ yếu trong 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à thông qua đó anh ta 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 về công nghệ máy tính không chỉ chú trọng đế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 về giao diện song song và nối tiếp

Đối với máy tính và các thiết bị tương tự khác, nhiệm vụ truyền dữ liệu với một lượng nhất định đóng một vai trò quan trọng. Để 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. Trong biến thể này, mỗi bit từ nhóm được truyền sử dụng đường tín hiệu riêng và chúng đượ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, trong khi mỗi bit được cung cấp trong một khoảng thời gian nhất định. Một ví dụ là bus nối tiếp USB.

Mỗi loại giao diện này đều có ưu và nhược điểm của nó. Mặc dù sử dụng tùy chọn song song là một giải pháp đơn giản và nhanh chóng hơn, nhưng nó đòi hỏi một lượng lớn dây và cáp để thực hiện. Các đường truyền giao diện nối tiếp phức tạp hơn, nhưng rẻ hơn nhiều. Theo đó, nếu đường dây cần kéo dài một đoạn 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

Do đó, 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 chính của nó. Hàng năm, giao diện của các thiết bị kỹ thuật khác nhau đượ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.

Giao diện trực quan. Chà, đếm xem bạn có thường xuyên nghe / đọc cụm từ này không? Hoặc có thể bạn nói chuyện thường xuyên? ;)

Đồng thời, tôi luôn tự hỏi mình những câu hỏi ngấm ngầm khác nhau: ai hiểu? Làm thế nào dễ hiểu? Và cứ thế ... Tôi nhớ rằng chúng tôi đã tranh luận nhiều lần, chẳng hạn, với Thuyền trưởng về các trang web nói chung (trường hợp cuối cùng như vậy).

Đây là một gợi ý. Và đây là câu chuyện cổ tích. Tôi chưa viết và không có kế hoạch viết các bài đăng trả tiền: các bài đăng mà tôi phải nói tích cực về việc ai sẽ trả tiền cho tôi. Đây là cách tôi trả lời tất cả những ai muốn mua bài. Nhưng đôi khi - với niềm vui của tôi - tôi bắt gặp những người thích hợp sẵn sàng nắm bắt cơ hội. Tôi không lấy tiền, nhưng tôi hứa sẽ bày tỏ những gì tôi nghĩ về dịch vụ / địa điểm / công ty. Rủi ro trung thực? :))

Tôi rất mừng vì lần này chính dịch vụ Belarus đã rơi vào bẫy của tôi. Và tôi quyết định không chỉ mô tả những gì tôi thấy mà còn tiến hành một thí nghiệm vi mô như vậy.

Tôi không tự lái xe hơi (và, trời ơi, tôi không định làm vậy). Nhưng tôi có một đối tượng thử nghiệm tuyệt vời: mẹ tôi là một người lái xe có kinh nghiệm và một người dùng Internet thiếu kinh nghiệm :) Tôi đặt mẹ tôi vào máy tính của mình, mở trang web zavodi.by và đề nghị tìm loại lốp phù hợp với bà bây giờ ...

Vì vậy, sau một hướng dẫn ngắn gọn - đây là loại trang web nào - mẹ tôi bắt đầu tìm kiếm ...

Những khám phá mà cô ấy thực hiện cũng là những khám phá cho tôi.

Ví dụ, một người dùng Internet thiếu kinh nghiệm không hiểu ngay lập tức làm thế nào tôi có thể tìm kiếm:)) Đặc biệt là vì "tìm kiếm nhanh" () thực sự không phải là nhỏ, phải không? Và nó khác với mở rộng () một chút ... Thành thật mà nói, một tìm kiếm NHANH cá nhân, tôi (cùng với mẹ tôi :)) sẽ thực hiện ít hơn ...

Lần mở thứ hai của buổi tối: mẹ tôi tuy là người ham lái xe nhưng không nhớ thuộc lòng tất cả các thông số của lốp xe (vâng, có cái gì cũng phải nhớ ...) Vì vậy, vấn đề chính là nhớ các thông số chính xác. ... Một liên kết nhỏ " Khoảng thời gian"Ngay cả đối với tôi, điều đó dường như không hề rõ ràng (mặc dù tôi không phải là người lái xe ô tô, nhưng tôi sống trên Web mọi lúc ...)

Nhân tiện, một giải pháp tốt cho vấn đề trong tình trạng khó khăn này là ... tốt, một tìm kiếm tốc độ rất cao trong một menu riêng biệt, khi bạn có thể chọn ngay những gì có liên quan nhất (theo giá cả, theo tình trạng, theo loại, và Sớm) ().

Riêng biệt, tôi muốn lưu ý trang mà chủ sở hữu trang web báo cáo rằng không có lốp phù hợp trong cơ sở dữ liệu. Một người dùng bình thường tại thời điểm này bị ấn tượng bởi những gì lớn hơn và sáng hơn, đó là: logo Nokian và văn bản về chúng. Và đó là tất cả ... Nếu tôi là nhà phát triển, tôi sẽ chú ý đến trang nhỏ nhưng quan trọng này, làm nổi bật ít nhất một chút sáng sủa hơn thông điệp và hướng dẫn "Làm gì tiếp theo?" ().

Sau khi tìm thấy lốp xe phù hợp, mẹ tôi cẩn thận (vâng, điều này cũng quan trọng đối với bà) đọc mô tả và có thể đã đặt hàng ... Nếu nó không chỉ là một thử nghiệm bây giờ :) Sau đây tôi sẽ tiếp tục thay mặt tôi .

Riêng biệt, tôi muốn lưu ý rằng dịch vụ được thực hiện theo cách " lốp xe được đặt hàng thông qua người quản lý của chúng tôi! Điều này được thực hiện để phục vụ yêu cầu của bạn một cách nhanh chóng và hiệu quả nhất có thể.»Cách tiếp cận này tiết kiệm cho chúng tôi, người mua, thời gian và thần kinh (hãy nhớ những xung đột thường xuyên của các trang web như vậy, chẳng hạn như Onliner, về chủ đề“ ai là người phải chịu trách nhiệm ”: trang web hoặc người bán trong mỗi trường hợp).

Điều gì sẽ quan trọng đối với hầu hết người Belarus: trang web này “nhẹ” và tải khá nhanh và không gặp khó khăn (như bạn biết: “Trong khi người Nga xem YouTube, người Belarus đang đọc Wikipedia.” Vì vậy, zavodi. theo trọng lượng khá tương ứng với cấp độ Wiki :))).

Phán quyết của tôi? zavodi.by đã mạo hiểm không phải là vô ích (đặc biệt khi xem xét rằng chúng chưa được một tháng tuổi, theo như tôi hiểu). Ý tôi là những dịch vụ như vậy rất hữu ích trong nhiều lĩnh vực. Và cuộc sống của tôi bây giờ sẽ dễ dàng hơn bao nhiêu, khi tôi không phải tìm kiếm những chiếc lốp phù hợp cho mẹ tôi trên khắp các phương tiện truyền thông :-D Tất nhiên, dự án vẫn còn rất nhiều việc, vẫn còn nhiều chỗ để phát triển và phát triển, nhưng xuất phát điểm, theo tôi, không tồi.