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
Yellow Fade Technique(YFT) trong thiết kế UX
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.
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
- 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
- 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)
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.
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
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
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
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
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
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
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)
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ị
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
13. Chiều dài form-control nên tỉ lệ thuận với chiều dài nội dung
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)
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
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
|
1
2
3
4
5
6
7
8
9
|
{
"name": "grunt-getting-started",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.4",
"grunt-contrib-watch": "latest",
"grunt-express": "^1.4.1"
}
}
|
Bước 2: Cấu hình Grunfiles.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
express:{
all:{
options:{
port:9000,
hostname: 'localhost',
bases: ['.'],
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express');
grunt.registerTask('default',['express','watch']);
}
|
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)
|
1
|
<script src="//localhost:35729/livereload.js"></script>
|
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.
