it-swarm-vi.com

Khi một nút chứa văn bản và một biểu tượng, cái nào sẽ đến trước?

Buttons Icon before and after the text...

Giả sử tôi đang tối ưu hóa để làm cho nó nhanh nhất và dễ dàng nhất có thể cho hầu hết người dùng để tìm nút họ cần, thứ tự tối ưu là gì?

81
Mohamad Jamal Ramadan

Tôi có thể đề nghị biểu tượng đầu tiên, sau đó văn bản; Sau đó, văn bản sau biểu tượng về mặt lý thuyết có thể là bất kỳ độ dài nào (trong lý do), trái ngược với cách tiếp cận 'văn bản đầu tiên' sẽ khiến biểu tượng của bạn bị kéo dài về phía sau.

Ngoài ra, các ngôn ngữ như tiếng Anh, tiếng Hy Lạp và tiếng Latinh hoặc các ngôn ngữ viết bằng chữ viết Cyrillic đều được viết và đọc từ trái sang phải (không giống như các ngôn ngữ như tiếng Do Thái và tiếng Ả Rập, từ phải sang trái), vì vậy nếu sản phẩm của bạn bằng ngôn ngữ tiếng Anh thì nó có ý nghĩa để có biểu tượng trước (bên trái) để nó không làm gián đoạn dòng chảy của văn bản nút.

Xem thêm thông tin hướng văn bản tại đây: http://www.w3.org/I quốc tế/questions/qa-scripts # expamples

80
user46618

Icon align example

1. Căn lề trái

  • (+) Các biểu tượng được xếp hàng.
  • (+) Dòng biểu tượng song song với dòng được hình thành bởi các chữ cái đầu tiên của các từ.
  • (+) Không có khoảng cách không cần thiết giữa biểu tượng và văn bản.
  • (+) Tạo cảm giác tốt vì sự tương đồng với danh sách xuất hiện trong đó các viên đạn tương tự như các biểu tượng.
  • (+) Trong trường hợp các nút hành động, biểu tượng xuất hiện trước văn bản, do đó bạn có thể liên kết hành động trước khi đọc văn bản, do đó không cần phải đọc nó.

2. Sau văn bản

  • (+) Không có khoảng cách không cần thiết giữa biểu tượng và văn bản.
  • (-) Các biểu tượng không thẳng hàng.
  • (-) Cảm thấy như một danh sách nhân đôi điên rồ.

3. Căn lề phải

  • (+) Các biểu tượng được xếp hàng.
  • (-) Khoảng cách không cần thiết giữa biểu tượng và văn bản.
  • (-) Cảm thấy giống như một danh sách nhân đôi.
46
totymedli

Biểu tượng đầu tiên và văn bản sau.

Đọc thêm tại đây: Nên đặt mũi tên trước văn bản liên kết hoặc sa để hiểu rõ hơn một số lý do đằng sau nó, mặc dù các biểu tượng có thể khác nhau nhưng chắc chắn phục vụ cùng một mục đích.

Bạn có thể thấy từ Ứng dụng như Google Mail

enter image description here

16
Shina

Bộ não con người quét hình ảnh nhanh hơn nhiều so với văn bản. Điều này có ý nghĩa, vì các hệ thống thị giác của chúng ta chỉ là các hệ thống nhận dạng hình ảnh khổng lồ được phát triển để quét một luồng hình ảnh liên tục cho các mẫu quan trọng (động vật ăn thịt, một loại trái cây không độc). Kết quả là, những hình ảnh quen thuộc không có nhiều chi phí nhận thức. Tuy nhiên, đọc văn bản sẽ tạo ra nhiều tải hơn, vì bạn đang xử lý nhiều hình ảnh và kết hợp tất cả lại với nhau để tìm ra văn bản nói gì. Trên trang web, người dùng sẽ không đọc (hoặc thậm chí thông báo) mọi chi tiết trên trang. Thay vào đó, mắt của họ sẽ quét (từ trên xuống dưới, từ trái sang phải trong các nền văn hóa phương Tây) mà không cần đọc nhiều hơn 1 từ liên tiếp cho đến khi thứ gì đó có thể là thứ họ đang tìm kiếm thu hút sự chú ý của họ.

Công việc của bạn là làm cho việc quét dễ dàng hơn, vì vậy hãy đặt biểu tượng nơi người dùng sẽ nhìn thấy nó đầu tiên (bên trái trong các nền văn hóa phương Tây). Nếu bạn không có biểu tượng có thể nhận ra ngay lập tức cho một cái gì đó thì hãy đặt Word nhiều thông tin nhất lên trước.

13
Franchesca

Ý kiến ​​của tôi về điều này là tốt hơn là có phần tử 'chiều rộng cố định' (biểu tượng) ở bên trái, điều này có nghĩa là nếu giao diện của bạn chứa một số các nút này ở trên nhau, các biểu tượng sẽ xếp hàng một cách độc đáo giả sử các nút của bạn nằm bên trái căn chỉnh.

Điều này sẽ cho phép người dùng nhanh chóng quét qua khu vực và xác định những gì các nút làm mà không cần phải đọc toàn văn. Mặt khác, nếu bạn đặt các biểu tượng bên phải, người dùng sẽ phải quét toàn bộ văn bản để tìm biểu tượng, điều này không chỉ mất nhiều thời gian hơn mà còn khiến nút di chuyển ở vị trí đầu tiên như một sự trợ giúp để tăng tốc độ nhận diện chức năng của nút.

Có một điểm liên quan đến các ngôn ngữ từ phải sang trái tập trung khác nhau vào các giao diện, tuy nhiên nếu bạn muốn tùy chỉnh các ngôn ngữ này một cách chính xác, bạn sẽ muốn tạo toàn bộ bố cục dựa trên các yếu tố được căn phải thay vì chỉ di chuyển các biểu tượng qua một nút, thực tế là có nhiều vấn đề liên quan hơn và bạn có thể vượt qua cây cầu đó khi bạn đến với nó.

3
Vality

Câu hỏi tuyệt vời! Như bạn đã giả định chính xác, các biểu tượng có thể được sử dụng để cải thiện tốc độ điều hướng trang web, vì thiết kế web là một vấn đề tìm kiếm .

Nghiên cứu theo dõi bằng mắt của Tập đoàn Nielsen Norman tuyên bố rằng người dùng có xu hướng quét một trang web theo mẫu 'F' - trước tiên theo chiều ngang (thanh trên cùng của F), xuống trang một chút, sau đó theo chiều ngang ngắn khoảng cách (thanh dưới của F), để cuối cùng quét phía bên trái của trang theo chiều dọc.

icon image Quét hình chữ F xuất phát từ mong muốn của người dùng để giảm thiểu chi phí tương tác của họ, điều này vô tình làm tăng khả năng bỏ lỡ thông tin quan trọng tiềm năng của họ. Thiết kế tốt sẽ giảm quét hình chữ F và bất kỳ kiểu quét nào khác.

Là nhà thiết kế web, chúng tôi có thể sử dụng phương pháp nào để khám phá thông tin quan trọng vô hại cho người dùng?

Một cách tiếp cận hiệu quả là sử dụng hình tượng.

icon image

Các biểu tượng phục vụ như là phương tiện trực quan hiệu quả. Một biểu tượng được đặt trước văn bản nút sẽ giúp người dùng tiết kiệm chi phí đọc hơn mức họ mong muốn, do đó cải thiện tính dễ quét của trang và cuối cùng góp phần mang lại trải nghiệm thú vị cho phiên của họ.

Tuy nhiên, có một cảnh báo (luôn có một cảnh báo). Các biểu tượng xuất hiện sau văn bản không phải lúc nào cũng hoàn toàn là trang trí, mà là các chỉ báo trạng thái trên nhãn hoặc là dấu hiệu rõ ràng trên các nút CTA.

icon image

* Một quy tắc tuyệt vời đã giúp tôi là nghĩ về các biểu tượng như các gạch đầu dòng . Cả hai đều có chung một số mục đích quan trọng tương tự:

  • Thu hút sự chú ý đến thông tin quan trọng
  • Cải thiện dễ dàng quét thông tin
  • Thông tin quảng bá hiệu quả và hiệu quả

Đọc thêm bấm tại đây hoặc tại đây

3
Patrick Funom

Trong tiếng Anh và các ngôn ngữ từ trái sang phải (LTR) khác, điều có ý nghĩa nhất là có biểu tượng đầu tiên.

Biểu tượng bên trái cũng là một mẫu rất phổ biến trong hầu hết các phần mềm, nếu bạn nghĩ nó là "dấu đầu dòng" cho nhãn, nó trở thành một cách đơn giản thu hút sự chú ý vào nút và dễ nhận biết hơn cho người dùng.

Ví dụ: người dùng muốn in, họ thấy biểu tượng in và không cần đọc Word - họ bấm in. Nếu như bạn có biểu tượng cuối cùng, họ sẽ quét nút ltr và đọc Word sau đó thấy biểu tượng mất nhiều thời gian hơn.

Nếu người dùng không nhận ra biểu tượng, họ sẽ thấy biểu tượng và sau đó đọc Word - và sau nhiều lần sử dụng sẽ nhận ra biểu tượng đó trở nên nhanh hơn khi chọn hành động đó.

0
Grant McAllister

Chúng ta nên nhớ rằng chúng ta là những sinh vật trực quan, chúng ta liên kết tốt hơn với hình ảnh và màu sắc hơn là văn bản. Vì vậy, các biểu tượng không chỉ là cải tiến mỹ phẩm khi được sử dụng trong các nút. Biểu tượng phải đủ rõ ràng cho người dùng để họ có thể dễ dàng nhận ra nút đó làm gì mà không cần đọc văn bản.

Vì vậy, dựa trên lý thuyết ở trên, tôi tin rằng biểu tượng đó phải là trọng tâm chính của nút và do đó nên đến trước.

Và lưu ý rằng trên một số trang web phản hồi, văn bản bên trong các nút bị ẩn sau khi bạn thay đổi kích thước trình duyệt theo chiều rộng nhất định.

mockup

tải xuống nguồn bmml - Wireframes được tạo bằng Balsamiq Mockups

0
donysukardi

Ngoài ra, hãy nhớ hai loại người dùng của bạn: mới và quay lại. Đôi khi, khách truy cập quay lại có nhiều khả năng được hưởng lợi từ một biểu tượng. Ví dụ: khi tôi kéo lên các bản đồ Google, điều mà tôi thường làm, tôi đã học cách tìm kiếm các biểu tượng "chế độ vận chuyển". Không có văn bản, nhưng nếu có, có nó ở phía trước sẽ gây rối. Rất nhiều đổi mới UI của Google tối ưu hóa trong thời gian dài, yêu cầu học tập ban đầu nhưng sau đó rất hiệu quả.

0
Vlad Malik

Tôi sẽ khuyên bạn nên sử dụng cái này hoặc cái kia nhưng không phải cả hai. Tuy nhiên, nếu bạn bắt đầu sử dụng cả hai, tôi sẽ, như những người khác đã đề xuất, hãy xem xét thứ tự đọc văn hóa và đặt biểu tượng trước văn bản. Trong tiếng Anh, nó sẽ ở bên trái, và nói tiếng Ả Rập, nó sẽ ở bên phải.

Các biểu tượng, theo ý kiến ​​khiêm tốn của tôi, sẽ phục vụ mục đích từ bỏ việc người dùng đọc văn bản, cho phép chúng có năng suất cao hơn. Đây là lý do tại sao các nút quicklaunch trong Ứng dụng Microsoft Office (và các ứng dụng khác) hoạt động, ngay cả khi không có văn bản. Giả định là biểu tượng đĩa sẽ lưu, mũi tên xoăn bên trái sẽ hoàn tác, mũi tên xoăn phải sẽ làm lại, biểu tượng máy in sẽ in tài liệu được hiển thị và trang phóng to sẽ xem trước tài liệu.

Microsoft Office 2007 Excel Quick Launch Bar

Hãy nhớ rằng, điều này chỉ hoạt động nếu bạn sử dụng các biểu tượng trong ngữ cảnh mà chúng thường được hiểu. Nếu người dùng nhấp vào biểu tượng máy in nhưng điều gì đó ngoài việc in xảy ra thì biểu tượng đó không được sử dụng đúng cách và người dùng của bạn có thể cảm thấy thất vọng.

Nếu bạn đang sử dụng các biểu tượng để đơn giản làm cho trải nghiệm người dùng cảm thấy "đẹp" hơn và năng suất không quan trọng, thì tôi sẽ nói hình ảnh trước văn bản, bất cứ lúc nào khác, tôi sẽ đề xuất cái này hoặc cái khác.

0
Zachary Weber