@manhnguyenv

Welcome to my blog!

UX - Cách tạo trang web đẹp để nâng cao trải nghiệm người dùng

December 15, 2017 02:20

UX - Cách tạo trang web đẹp để nâng cao trải nghiệm người dùng

Nếu bạn muốn select box của mình có các tính năng như tìm kiếm, chọn được nhiều phần tử, hỗ trợ tag…. thì đừng bỏ qua các thư viện sau đây nhé. Mình đã test thử và thấy rất ưng ý

1.Fast Select

http://dbrekalo.github.io/fastselect/

2. Multi select

https://github.com/wenzhixin/multiple-select

3. Chosen

https://harvesthq.github.io/chosen/

Làm sao để không quên thẻ alt khi thêm ảnh

img[alt=""],
img:not([alt]){
  border:15px solid red;
}

Yellow Fade Technique(YFT) trong thiết kế UX

Chẳng hạn bạn viết một ứng dụng có chức năng thêm mới 1 bản ghi. Sau khi thêm xong nó sẽ đóng cửa sổ lại và hiện ngay bản ghi mới trên danh sách. Nhưng vấn đề ở chỗ nếu chỉ thêm 1 cách đơn thuần thì người dùng sẽ khó phát hiện ra bản ghi mới thêm, thay vì đó ta có thể hightlight bản ghi mới trong vòng 5 giây như dưới đây
Kỹ thuật này giúp tăng sự chú ý của người dùng vào nội dung, đây chính là Yello Fade Technique (YFT). Có rất nhiều cách để thực hiện YFT, chúng ta có thể sử dụng jquery như dưới đây

jQuery.fn.highlight = function () {
$(this).each(function () {
var el = $(this);
$("<div/>")
.width(el.outerWidth())
.height(el.outerHeight())
.css({
"position": "absolute",
"left": el.offset().left,
"top": el.offset().top,
"background-color": "#ffff99", /*Bạn có thể sửa màu sắc tại đây*/
"opacity": ".7",
"z-index": "9999999"
}).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
});

Lần sau muốn thực hiện YFT cho thành phần nào ta chỉ cần gọi
$("#div-id").highlight();

UI/UX - Một vài mẫu thiết kế form rất hay ho, mời các bạn tham khảo

1. Form nên thiết kế 1 cột

Các bạn chỉ nên thiết kế form dạng 1 cột từ trên xuống dưới, tránh trải dài các thông tin ra làm 2 cột vì ảnh hưởng đến sự tập trung của khách hàng.

Thiết kế UI/UX cho form

Form nên thiết kế 1 cột

Thực tế là lần đầu tham khảo mẫu này mình cũng không đồng tình lắm vì thực tếcó những form có tới hàng chục trường nhập liệu, nếu để một cột thì thực sự form đó rất dài. Tuy nhiên sau khi tham khảo thêm mẫu thiết kế của google, mình đã thay đổi quan điểm và có 1 vài hướng xử lý như sau

  1. Form dài quá thì nên để dạng wizard (nhiều step), người dùng sẽ ấn next để chuyển sang màn hình tiếp theo. Điều này giúp người dùng đỡ sốc khi thấy quá nhiều trường thông tin
  2. Nên bố trí thêm 1 vài hình ảnh để giảm tính đơn điệu của form (Tham khảo mẫu thiết kế của google bên dưới)
Thiết kế UI/UX cho form

Mẫu thiết kế hết sức đơn giản của google

2.Label của form nên để ở phía trên form-control

Chúng ta nên để label của các form-control ở phía trên, điều này giúp hiển thị tốt hơn ở trên mobile và tỉ lệ người dùng nhập thông tin sẽ cao hơn là thiết kế label ở bên trái. Tuy nhiên điều này cũng cần cân nhắc khi form có quá nhiều control, bạn cũng có thể cân nhắc để bên trái.

Thiết kế UI/UX cho form

Các label nên để ở phía trên

3.Group label và form-control

Chúng ta không nên để margin giữa label và form-control đều nhau như hình bên phải. Hãy để như hình bên trái, ở đây chúng ta sẽ tách biệt được các ô nhập liệu khác nhau, nhìn form cũng thoáng hơn nhiều

Thiết kế UI/UX cho form

4. Tránh viết hoa LABEL

Các bạn tránh viết hoa label nhé, vì như vậy rất khó nhìn

Thiết kế UI/UX cho form

Viết hoa label khiến người dùng khó đọc hơn

5.Hiển thị tất cả các tùy chọn nếu có ít hơn 6

Lợi ích của thiết kế này quá rõ ràng

  • Giúp người dùng nhận được thông tin nhanh hơn, rõ ràng hơn vì đã show hết ra rồi
  • Giảm thiểu được 1 thao tác click, vuốt(trên mobile) khi nhập thông tin

Thiết kế UI/UX cho form

6.Không sử dụng placeholder thay cho label

Việc sử dụng placeholder thay cho label trông có vẻ như tiết kiệm diện tích, nhưng nó lại gây rắc rối rất lớn là sau khi nhập xong thông tin thì không biết đằng nào mà sửa

Thiết kế UI/UX cho form

7. Radio button, checkbox nên để theo từng dòng

Để radio button, checkbox theo từng dòng khiến người dùng dễ theo dõi hơn

Thiết kế UI/UX cho form

8. các nút CTA nên được mô tả rõ ràng

Bạn nên mô tả rõ ràng nút submit được dùng để làm gì như đăng ký, đăng nhập, gửi email thay vì chỉ đơn thuần là submit

9. Không liệt kê lỗi ở đầu hay cuối form

Chúng ta nên hiện lỗi ngay dưới ô nhập liệu, điều này giúp người dùng dễ theo dõi hơn là tổng hợp tập trung tại đầu hay cuối form

Thiết kế UI/UX cho form

10. Validate ngay khi nhập liệu

Đây không phải yếu tố bắt buộc, tuy nhiên sẽ tốt hơn cho người dùng nếu bạn validate được lỗi ngay khi khách hàng nhập liệu (tức là chưa chuyển sang form nhập liệu kế tiếp đã validate được rồi)

Thiết kế UI/UX cho form

11. Không ẩn những đoạn text helper hữu ích

Trong 2 form bên dưới, bạn thấy form nào đem lại thông tin rõ ràng hơn cho người dùng ? Một cái show ra luôn, còn một cái phải rê chuột qua(hoặc click) thì mới hiển thị

Thiết kế UI/UX cho form

12. Làm nổi bật nút CTA

Không được để nhiều nút có cùng 1 style trong 1 form, hãy làm nổi bật nút chức năng càng nhiều càng tốt. Điều này sẽ thu hút sự chú ý của người dùng

Thiết kế UI/UX cho form

13. Chiều dài form-control nên tỉ lệ thuận với chiều dài nội dung

Thiết kế UI/UX cho form

14. Đừng dùng dấu * nữa

Truyền thống từ xa xưa mà các cụ lập trình viên để lại là sử dụng dấu * đánh dấu làm trường bắt buộc, tuy nhiên đã đến lúc nó cần phải thay đổi . Hãy ẩn * đi và hiển thị trường tùy chọn (là một small text có #ccc chẳng hạn)

Thiết kế UI/UX cho form

15. Nhóm các trường thông tin liên quan lại với nhau

Nếu form phức tạp gồm quá nhiều trường thông tin, chúng ta nên tìm cách gom chúng lại để người dùng theo dõi dễ hơn

Thiết kế UI/UX cho form

Auto refresh với grunt

Sửa xong html hay css rồi sau đó ấn F5 để xem kết quả. Vậy bạn định lặp lại các thao tác chán ngắt đó đến bao giờ. Chúng ta có thể loại bỏ thao tác tẻ nhạt đó bằng thư viện grunt-express .Giờ đây thì không cần phải ấn F5 để refresh lại trang nữa, và quan trọng hơn cả là làm cho công việc của chúng ta thú vị hơn rất nhiều. Ok, bắt đầu thôi.

Bước 1: Cài đặt grunt-express

Hãy đảm bảo máy tính của bạn đã được cài grunt và nodejs đầy đủ, nếu chưa có thì hãy xem lại bài viết này. Sửa lại file package.json như dưới đây sau đó chạy npm install

 

Bước 2: Cấu hình Grunfiles.js

 

 

Bước 3: Chỉnh sửa file index

Mở file index.html hoặc file nào đó mà sẽ là file chạy chính của web, và thêm đoạn script sau (Rất quan trọng nha, ko có thì sẽ không chạy)

 

Bước 4: Chạy grunt

Mở terminal lên và chạy grunt. Sau đó truy cập localhost:9000. Bây giờ bạn chỉnh sửa bất cứ file gì như html,css,js thì website sẽ đều reload lại.

 

Thư viện hay - What You See Is What You Get (WYSIWYG)

http://apollo13.vn/lap-trinh/javascript/cac-thu-vien-hay/summer-note-simple-super-wysiwyg-editor.html

https://summernote.org/

Categories

Recent posts