Thiết kế giao diện Form: một số thủ thuật giúp Form trực quan hơn.
ongke0711 > 30-07-18, 12:41 AM
Chào các bạn,
Trong quá trình thiết kế các ứng dụng, tôi cũng đã học hỏi được một vài kỹ thuật thiết kế giúp Form trực quan hơn đối với người dùng. Lần này tôi chia sẻ các thủ thuật này cho các bạn mới bắt đầu bước chân vào việc thiết kế Form của Access được hiệu quả hơn.
Tại sao tôi viết bài này?
Trước đây có câu “Tốt gỗ hơn tốt nước sơn”, theo quan điểm marketing của tôi câu này vẫn đúng nhưng chưa đủ trong thì hiện tại nữa. Thời buổi bây giờ cạnh tranh cao, gỗ tốt rất nhiều, giống nhau hết rồi thì để bán được hàng phải cạnh tranh tới nước sơn luôn. Do vậy bạn đừng nói ứng dụng tôi quan trọng là chạy nhanh, nhẹ, đáp ứng yêu cầu là được rồi nên chỉ tập trung vô phân tích CSDL, viết code kiết chứ không cần mất thời gian nhiều cho thiết kế giao diện thì phải suy nghĩ lại. Nói chút về marketing, để hàng tiếp cận được ngừoi dùng thì trước hết phải tạo cơ hội người dùng được dùng thử (Trial) -> rồi mới chuyển sang dùng luôn hay bỏ luôn (Conversion). Và một trong nhưng yếu tố đầu tiên để gây ấn tượng cho người dùng, kích thích họ tò mò, tiến tới dùng thử chính là vẻ bề ngoài sản phẩm + Quảng cáo các đặc điểm nổi bật của nó + Giá. Vậy trong một rừng sản phẩm, sp nào có đặc điểm nổi trội (chỉ ở giai đoạn mới nghe quảng cáo thôi) + vẻ ngoài bắt mắt sẽ có cơ hội được người dùng chọn dùng thử trước các sản phẩm khác. Từ đó đối với một ứng dụng, phần mềm ngoài các tính năng xử lý của nó, giao diên sử dụng chính là yếu tố gây chú ý của người đùng đầu tiên.
Bạn xem ví dụ sau: Tôi đang muốn kiếm phần mềm quản lý quán cafe, search trên mạng thì thấy rất nhiều phần mềm, vậy lướt sơ qua cái giao diện ứng dụng đó xem sao rồi download về dùng thử trước khi quyết định mua bản quyền.
Ứng dụng số 1:
Ứng dụng số 2:
==> Trong môi trường quán ăn, quán cafe, hoạt động tấp nập, thao tác phải nhanh để tính nhập, tính tiền cho khách thì ứng dụng nào đáp ứng y/c này sẽ thắng. nếu chỉ nhìn phớt qua (scanning), cái ứng dụng số 2 sẽ có cơ hội được người dùng chú ý hơn vì nhìn có vẻ bắt mắt, rõ ràng, không rối, dễ nhập liệu hơn --> cơ hội download về dùng thử cao hơn --> cơ hội bán ứng dụng cao hơn.
Nói đông dài như vậy để các bạn thấy được tầm quan trọng của giao diện ứng dụng, nên dành thêm thời gian để chăm chút cho nó. Thiết kế giao diện cũng là một môn khoa học nó gộp chung tâm lý học của người với thiết bị, sự dễ sử dụng, dễ hiểu vô 1 form. Dữ liệu hiển thị trên Form càng nhiều thì thiết kế phải càng nhất quán và thân thiện người sử dụng.
Mở bài xong rồi, giờ đến thân bài.
Trong phần này tôi tổng hợp và chia sẻ về một số đề xuất liên quan để giao diện Form như sau:
- Canh lề, bố trí các control (label, textbox...).
- Font.
- Màu sắc (màu nền, font).
1. Canh lề, bố trí controls:
# Cái bẫy khi thiết kế kích cỡ các textbox bằng nhau.
Một trong các khuynh hướng thiết kế để Form nhìn gọn gàng hơn là canh đều kích cỡ các textbox như hình dưới đây:
Việc dùng cùng một kích thước cho các field như trên làm mắt giảm đi cái khả năng lọc, phân biệt các thông tin cần điền khi nhìn lên form. Ví dụ như thông tin số điện thoại, fax rất ngắn nhưng cái ô thì dài ngang các field khác nên người sẽ khó bắt tín hiệu, định vị nhanh nó nằm ở dòng nào.
Thực ra chỉ cần bố trí trật tự ngay hàng thẳng lối, độ dài của field tương ứng với dữ liệu cũng đem lại một thiết kế đẹp, hợp lý cho form như hình dưới.
# Tránh thiết kế Form có nhiều cạnh thò ra thụt vô.
Bạn xem 2 hình bên dưới. Rõ ràng là cái hình thứ 2 dễ nhìn hơn nhiều.
Do vậy, chúng ta nên thiết kế thẳng hàng dọc khi bắt đầu các lable và khi kết thúc textbox (có cùng kích cỡ) cũng nên thẳng theo hàng dọc. Nó sẽ làm tăng tính thẩm mỹ hơn.
# Việc dàn hàng ngang các checkbox cũng không thuận tiện cho người dùng thao tác. Layout hàng dọc, mắt người dùng quét qua sẽ nhanh hơn và việc chọn cũng được nhanh hơn.
# Canh lề các Label:
Các bạn thấy trong hình dưới, việc canh phải tất cả các label giúp chúng ta dễ liên kết tiêu đề với ô nhập liệu hơn. Có nhưng trường hợp các dòng label nhiều thì ta có thể nhóm các dòng nào cùng loại ở một bên. Ví dụ: danh sách bảng câu hỏi - trả lời. Các câu hỏi có thể canh trái và tất cả câu trả lời thì canh phải.
Có một khảo sát nhỏ về việc mắt người dùng phản ứng như thế nào đổi với việc bố trí các Label trên Form của Matteo Penzo. Tôi lược dịch lại để các bạn tham khảo. Họ test người dùng về việc đảo mắt (liếc mắt) và số lần liếc mắt trên 1 Form. Có 4 cái test như sau:
1. Canh trái Label so với textbox:
Đối với layout này, khoảng cách giữa Label và ô nhập liệu khá cao, nên số lần người dùng phải đảo mắt qua lại giữa Label và ô nhập liệu là cao nhất. Các hình tròn xanh đại diện cho 1 lần đảo mắt của người dùng tới control. Các bạn thấy các hình tròn dày đặc tức là phải nhìn qua lại nhiều lần. Thời gian trung bình 1 lần đảo mắt là 500 ms, do đó người dùng sẽ mất nhiều thời gian hơn cho việc nhập liệu ở Form layout dạng này.
2. Canh phải Label so với textbox:
Đối với layout này, việc kết nối giữa Label và ô nhập liệu được nhanh hơn do nằm sát nhau hơn. Do đó số lần người dùng phải đảo mắt qua lại giảm đi một nữa và thời gian để điền hết Form này cũng được cải thiện nhanh hơn.
3. Canh trái và đặt label nằm bên trên so với textbox:
Việc đặt Lable nằm ngay bên trên ô nhập liệu cho phép người dùng chỉ cần một lần nhìn là có thể nắm bắt ngay nội dung (liên kết) giữa tiêu đề và ô nhập liệu mà không cần phải đảo mắt qua lại để xem. Bên cạnh đó nếu người dùng có đảo mắt thì cũng chỉ mất khoảng 50 ms. Thời gian xử lý cũng chỉ bằng 1/10 so với trường hợp đầu.
4. Canh trái , đặt label nằm bên trên và tô đậm (bold) so với textbox:
Đây là thí nghiệm làm thêm. Họ muốn tô đậm cái label để xem có cải thiện hơn không.
Cũng có nhưng quan điểm thiết kế nói rằng nếu bạn dùng Bold quá nhiều các tiêu đề thì sẽ đem lại cảm giác nặng nề khi xem cái form và tôi cũng đồng quan điểm này. Trong thiết kế, cái gì bạn cũng muốn nổi bật (muốn highlight) thì hoá ra chẳng có cái nào nổi bật khi xem.
Nhưng đối với khảo sát này thì việc Bold các label lại tăng tới 60% khả năng cho mắt kết nối giữa label và ô nhập liệu. Số lần cần phải đảo mắt qua lại đối với thiết kế kiểu này là thấp nhất (hiệu quả nhất)
Nói túm lại là dùng layout này cũng ok nhưng có chừng mực.
# Label nằm trong ô nhập liệu:
Một cách thiết kế khác cũng thường áp dụng là đặt cái label nằm luôn bên trong textbox để tiết kiệm không gian của form.
- Một cách thông thường khi không gian thiết kế dư giả là như thế này: gọi là cách 1
- Cách tiết kiệm không gian (cách 2): lấy vị trí của placeholder text làm label luôn.
Cách thứ 1 hoặc 2 trên cũng không khuyến khích dùng, đặc biệt là cách 2 vì các lý do sau:
+ Khi nhập liệu vào ô này thì cái label cũng biến mất gây khó cho người dùng trong việc kiểm tra lại xem mình nhập có đúng ô yêu cầu không vì có thể không nhớ.
+ Không có gợi ý nhập liệu gì, như thế nào cho textbox, người dùng đôi khi cũng lúng túng. Nếu theo cách thiết kế đầu tiên, họ có thể xoá trắng cái textbox để đọc lại nội dung gợi ý, nhưng theo cách 2 thì không thể.
+ Textbox mà có chữ bên trong sẽ ít tạo sự chú ý người dùng. Cũng theo nghiên cứu về EyesTracking thì ô Texbox để trống sẽ thu hút sự chú ý tập trung hơn. Người dùng có khuyn hướng nhìn lướt qua nếu ô nào có dữ liệu rồi hoặc đôi khi họ nghĩ các từ gợi ý, ví dụ trong ô đó như là nội dung mặc định (default) nên bỏ qua ô này.
+ Người dùng mất thời gian để xoá các từ gợi ý trong textbox trước khi nhập liệu. Nếu không lập trình tốt công đoạn này thì sẽ gây mất thời gian nhập liệu của người dùng.
Nói tóm lại:
- Có thể dùng dạng Label nằm trong textbox đối với các form ít ô nhập liệu và nội dung các ô này quen thuộc với người dùng. Ví dụ: form Login - form này thì theo thói quen là ô đầu nhập username, ô sau nhâp pass
- Cách tốt nhất vẫn là form như thế này:
(Còn tiếp)