99-cach-toi-uu-trai-nghiem-website-converted-converted

99 Cách Tối Ưu Trải Nghiệp Website HÔ BIẾN WEBSITE THÀNH CỖ MÁY HÁI RA TIỀN Trước vào chủ đề chính, tơi muốn kể bạn nghe câu chuyện tiếng giới làm website button trị giá 300 triệu đô la: Ngày xửa ngày xưa, đất nước nọ, có trang web bán hàng… Chức trang web bán hàng biết: hiển thị hàng, cho hàng vào giỏ, toán Câu chuyện bắt đầu chức “Thanh toán”, người dùng cho hết hàng vào giỏ, form nho nhỏ xinh xinh ra, với trường username password, nút Login Register, link Quên mật Thế nhưng, form be bé xinh xinh gây thiệt hại đến 300.000.000$/năm cho trang web bán hàng (!) Vấn đề chỗ, người dùng phải đăng nhập trước muốn tốn Đội lập trình nghĩ “Chỉ cần đăng ký tài khoản thông tin người dùng lưu lại, lần sau họ không cần nhập địa thông tin toán Người dùng tiết kiệm thời gian, web khuyến khích người dùng quay lại mua hàng, hai bên có lợi cịn gì?” Lũ lập trình viên ln nghĩ hiểu người dùng! Đội ngũ UI/UX làm thử nghiệm, đưa tiền cho người dùng để họ thực trình mua hàng – toán Đối với khách hàng trang web, họ phát điều: người dùng ghét việc đăng ký, với suy nghĩ “Mình muốn mua hàng, muốn đăng ký đăng kiếc cả” Chưa kể, người dùng cịn sợ bị thông tin cá nhân, bị gửi mail spam hộp thư Với người dùng quay lại lần 2,3 – đối tượng mà developer nhắm tới, tình cảnh chẳng Họ khơng nhớ username/mật Mặc dù chức “Quên password” hoạt động, đến tận 160 người dùng chức ngày, 75% số khơng tiếp tục q trình tốn sau request mật Chiếc form nho nhỏ xinh xinh kia, hóa lại thứ ngăn cản người dùng mua hàng – nhiều người dùng Thế biết, developer lúc nghĩ hiểu người dùng, Chiếc button trị giá 300 triệu đô la Đội ngũ designer giải vấn đề cách vô đơn giản Họ bỏ nút Register, thay vào nút Continue dịng chữ “Bạn khơng cần đăng ký, bấm nút Continue để toán Để toán nhanh lần sau, bạn đăng ký tài khoản vào lúc toán” Kết quả: Lượng toán khách hàng tăng lên đến 45% Sau tháng đầu tiên, doanh số tăng 15.000.000$ Sau năm đầu tiên, thu nhập web tăng đến tận 300 triệu đô la Tất việc mà họ làm gì? Chỉ thay button mà thơi Bạn thấy đấy, website đẹp chưa đủ, cịn phải thuận lợi cho khách hàng Sau tất chiêu thức marketing Facebook Google, khách hàng đồng ý ghé thăm website bạn Họ chí cịn muốn để lại thơng tin để tư vấn thẳng đến bước mua hàng Thật tuyệt vời! Tuy nhiên, đảm bảo tất thao tác website phải diễn thật trôi chảy! Bất gián đoạn khiến khách hàng phải dừng lại băn khoăn suy nghĩ, đồng nghĩa với việc bạn có khả khách hàng tiềm “Đừng xây dựng website thuận lợi cho bạn Hãy xây dựng website mắt người dùng.” Thông qua tài liệu này, bạn biết tips hữu ích giao diện trải nghiệm người dùng (UX/UI) Đây thuật ngữ quan trọng định tính hiệu cho website bạn Lưu ý, kiến thức tài liệu không sâu vào chuyên môn thiết kế hay lập trình Thay vào dẫn mà cần thiết để bạn thấu hiểu người dùng Từ bạn tự thực phối hợp với đơn vị xây dựng web để lập nên website thật hiệu Luôn ghi nhớ là, website vốn cỗ máy hái tiền, vấn đề bạn tận dụng triệt để hay không Chúc bạn ứng dụng thành công cho doanh nghiệp! Kiến thức Ebook tham khảo từ nguồn: http://www.goodui.org/ https://www.interaction-design.org/ http://usabilitygeek.com/ https://mediaz.vn/ http://topuxd.com/ http://rgb.vn/ideas/ https://techtalk.vn/ MỤC LỤC NỘI DUNG Phần 1: Tìm hiểu thuật ngữ UX/UI cho website UX LÀ GÌ? UI LÀ GÌ? ĐÁNH GIÁ MỘT UX TỐT ĐÁNH GIÁ MỘT UI TỐT HÌNH ẢNH VÀ MÀU SẮC 10 Bí 1: Sử dụng màu đơn sắc 10 Bí 2: Sử dụng ảnh có kích thước lớn 11 Bí 3: Khơng sử dụng ảnh bị biến dạng 11 Bí 4: Màu xanh dương mặc định cho đường links 12 Bí 5: Sáng ấm trước, lạnh tối sau 12 Bí 6: Sử dụng màu sắc phù hợp với thông điệp bạn muốn truyền tải 13 Phần 2: Bí tối ưu UX/UI cho website BỐ CỤC TRANG 14 Bí 7: Thử để bố cục trang web cột thay nhiều cột 14 Bí 8: Thử hợp chức tương tự thay phân mảnh UI 14 Bí 9: Cố gắng mở rộng phạm vi thay tạo thêm nhiều trang 15 Bí 10: Thử thay đổi hiệu ứng hiển thị 15 Bí 11: Bỏ bớt đường viền chạy ngang chạy dọc để tránh gây ý cho người dùng vào 15 Bí 12: Cố gắng phân biệt rõ ràng kiểu chọn mục khác để tránh nhầm lẫn 16 Bí 13: Hãy thiết kế cho phần liệu trống 16 Bí 14: Cố gắng thống giao diện thay làm cho người phải bối rối trình sử dụng 17 Bí 15: Hãy thiết kế theo quy ước chung thay chế kiểu 18 Bí 16: Hãy tách thông tin thành cấp bậc rõ ràng 18 Bí 17: Hãy gộp thứ liên quan vào nhóm Tránh để lộn xộn 19 Bí 18: Hãy nhắc nhở cách nhẹ nhàng thay sử dụng cửa sổ trạng thái 20 Bí 19: Tích hợp nhiều chức cần thiết 20 Bí 20: Sử dụng cơng cụ tính tốn cách thơng minh 21 Bí 21: Cố gắng thu hút ý 22 Bí 22: Đặt sản phẩm theo thay sản phẩm riêng lẻ 22 Bí 23: Hãy giảm dần luỹ tiến (Progressive Reduction) 23 Bí 24: Hãy tạo giao diện nhạy bén 23 Bí 25: Hãy thử trực quan rõ ràng thay mơ hồ 24 Bí 26: Hãy show trạng thái đơn hàng 24 Bí 27: Tạo kết nối trang web với mạng xã hội 25 Bí 28: Website nên có khung tìm kiếm, phải… dễ tìm 25 Bí 29: Thử đánh số đoạn nội dung 26 Bí 30: Cố gắng giữ tập trung vào nội dung thay chết chìm links liên kết 27 Bí 31: Hãy tách thông tin thành cấp bậc rõ ràng 27 Bí 32: Hãy sử dụng ngôn ngữ tự nhiên không cứng nhắc 28 Bí 33: So sánh cách dễ hiểu, tránh gây nhiễu 29 Bí 34: Hãy để lại nhiều khoảng trống 29 Bí 35: Hãy loại bỏ từ khơng cần thiết 30 Bí 36: Không sử dụng font nhỏ, hẹp 30 Bí 37: Nếu khơng cần thiết khơng in nghiêng 31 Bí 38: Khơng IN HOA tất chữ tiêu đề tag line 32 ĐIỀU HƯỚNG VÀ THAO TÁC TRÊN TRANG 32 Bí 39: Hãy hiển thị chế độ tùy chọn thay để ẩn chúng 32 Bí 40: Hãy để lệnh Hồn tác (Undo) thay phải xác nhận (Có Khơng) 33 Bí 41: Hãy hiển thị chế độ tùy chọn thay để ẩn chúng 33 Bí 46: Hãy kí hiệu cách dễ hiểu 36 Bí 47: Hãy phản hồi thay im lặng 36 GIAO DIỆN DI ĐỘNG 37 Bí 48: Website nên có chức responsive, thích hợp với đa dạng thiết bị di động 37 Bí 49: Các yếu tố điều hướng web nên có kích thước đủ để chạm 38 Bí 50: Chỉ click 38 Bí 51: Chỉ thao tác cuộn trang 38 THIẾT KẾ HỘP THOẠI 39 Bí 52: Giảm gián đoạn 39 Bí 53: Đừng mở hộp thoại cách đột ngột 39 Bí 54: Câu hỏi tùy chọn rõ ràng 40 Bí 55: Cung cấp thông tin quan trọng 42 Bí 56: Cung cấp thơng tin phản hồi 43 Bí 57: Cố gắng để đạt tối giản 44 Bí 58: Hộp thoại khơng nên có nhiều hai thao tác 44 Bí 59: Đừng bao gồm nhiều bước hộp thoại 45 Bí 60: Trang phía sau hộp thoại 45 Bí 61: Tùy chọn đóng hoàn toàn 46 Bí 62: Tránh việc dùng hộp thoại mở hộp thoại 47 CALL TO ACTION 47 Bí 63: Hãy làm bật lời kêu gọi hành động bạn thay thiết kế trơng tương đồng với thông điệp xung quanh 47 Bí 64: Hãy đốn thay dự 48 Bí 65: Hãy thử lặp lại lời kêu gọi hành động bạn thay đưa chúng có lần 48 Bí 66: Hãy cố gắng thử thêm lợi ích thay nút thực nhiệm vụ 49 Bí 67: Hãy để người dùng tự tham gia vào thay yêu cầu họ đăng ký 49 Bí 68: Hãy thử nhắc tới việc tránh để mát thay nhấn mạnh vào lợi ích có 50 Bí 69: Hãy thúc giục cách giới hạn thời gian 50 Bí 70: Tạo khan 51 Bí 71: Hãy phóng to nút “Click” 52 Bí 72: Hãy khẳng định lại tự thay ngụ ý điều 52 Bí 73: Hãy hài hước thay nghiêm túc 53 THU THẬP THÔNG TIN KHÁCH HÀNG 54 Bí 74: Hãy hỏi thơng tin thay u cầu người dùng nhập thông tin nhiều 54 Bí 75: Sử dụng chiến lược Opt-out thay Opt-in 54 Bí 76: Hãy để số thông tin mặc định cho người dùng dễ hình dung việc đăng kí 55 Bí 77: Hãy lỗi NGAY cho người dùng thay trì hỗn tới cuối 55 Bí 78: Khơng đặt nặng vấn đề kiểu liệu 56 Bí 79: Hãy giải thích, thay mặc định thứ rõ ràng 56 Bí 80: Nhãn form thơng tin nên nằm bên 57 Bí 81: Tránh dùng placeholder text làm nhãn 57 Bí 82: Thể yêu cầu nhập liệu trường nhập liệu 58 Bí 83: Đừng ẩn đoạn text trợ giúp 58 CHINH PHỤC KHÁCH HÀNG 59 Bí 84: Hãy thử đưa q thay chốt sale lự 59 Bí 85: Hãy để lại dấu ấn cá nhân 59 Bí 86: Thay tự nói thân để khách hàng nói bạn 60 Bí 87: Hãy đưa lời gợi ý thay để người dùng tự lựa chọn 60 Bí 88: Hãy nói rõ sản phẩm, dịch vụ dành cho thay nhắm đối tượng mục tiêu đến tất người 61 Bí 89: Hãy thuyết phục khách hàng lợi ích thay tính 61 Bí 90: Hãy tạo mỏ neo đầu người dùng 62 Bí 91: Tạo động thúc đẩy 62 Bí 92: Tạo tị mị thay tỏ dè dặt 63 Bí 93: Khẳng định rằng, bạn bảo đảm quyền lợi cho họ 64 Bí 94: Tạo hiệu ứng ảo định giá 64 Bí 95: Chọn quà tặng ngẫu nhiên thay q tặng dễ đốn trước 65 Bí 96: Hãy hài hước thay q nghiêm túc 65 Bí 97: Hãy kể chuyện, thay liệt kê danh sách 66 Bí 98: Hãy ln nói thật 66 Bí 99: Đặt lợi ích người khác lên hàng đầu 67 PHẦN 1: TÌM HIỂU CƠ BẢN VỀ THUẬT NGỮ UX/UI UX LÀ GÌ? UX (User experience) – trải nghiệm người dùng là cách mà người dùng cảm nhận họ tương tác với sản phẩm website, ứng dụng sản phẩm phần mềm Những trải nghiệm bị chi phối nhiều yếu tố khơng có thước đo chuẫn mực cụ thể Thiết kế trải nghiệm người dùng nhấn mạnh trình nâng cao hài lịng lịng trung thành khách hàng thơng qua việc tạo sản phẩm dể dàng sử dụng, nâng cao tính tiện dụng tương tác người dùng sản phẩm Khi trải nghiệm tốt, người ta có xu hướng mong muốn suy nghĩ tích cực UX định tồn thành công Trong thực tế, trải nghiệm tất khơng phải sản phẩm UI LÀ GÌ? UI (User Interface) – giao diện người dùng giao diện người dùng với sản phẩm, ứng dụng hay website Đơn giản UI cách người dùng nhìn thấy thiết kế chương trình desktop, laptop, tablet hay smartphone UI công cụ xử lý mạnh việc xếp yếu tố UX Tại sao? Đơn giản, giao diện phương pháp xúc tác hữu mà người dùng trải nghiệm sản phẩm UI cơng cụ bổ trợ Đây lời giải thích tốt cho lý UI UX thường xuyên sử dụng thay cho kết hợp làm ĐÁNH GIÁ MỘT UX TỐT UI người dùng nhìn thấy UX cách người dùng sử dụng website website có UI đẹp UX tệ Ví dụ khách hàng tiềm đến website bạn định muốn sign-up, button “Sign-up” “giấu” kĩ mn vàn thơng tin khác Khi tìm button trình sign up yêu cầu cung cấp q nhiều thơng tin khơng cần thiết Điều gây cho người dùng bất tiện khơng đánh có Vậy UX tốt có nghĩa là: Một website đáp ứng cầu người dùng mà không gây nhiều bất tiện hay bực tức cho người dùng sử dụng Một website đơn giản, thân thiện đẹp gây cảm hứng cho người dùng sử dụng ĐÁNH GIÁ MỘT UI TỐT Các nhà thiết kế website, nhà phát triển ứng dụng kinh doanh thương mại điện tử dành nhiều quan tâm đến việc hiểu yêu cầu người dùng thói quen người dùng– chẳng hạn họ muốn điều hướng nào, menu yêu cầu có – trước vào thiết kế UI cho ứng dụng họ Tồn q trình thu thập yêu cầu người dùng, đặt yếu tố khác phần mềm tạo giao diện người dùng hiệu gọi thiết kế giao diện người dùng (UI design) Một Website có UI tốt là: • Biết đối tượng sử dụng sản phẩm bạn để họ thấy rõ ràng thơng điệp có sẵn phù hợp với họ • Mượn hành vi, thói quen sử dụng quen thuộc người sử dụng • Tính trực quan , ngắn gọn, dễ hiểu • Tập trung vào vị trí tỷ lệ vàng, , tỉ lệ 1/3 Chúng ta thường bị thu hút khu vực chuyển động khu vực tĩnh Những thay đổi khu vực động phát dễ dàng Các trỏ văn ví dụ đối tượng hấp dẫn mắt Thay đổi hình ảnh báo hiệu thay đổi trạng thái khác hữu ích • Ngun tắc ngữ pháp , sử dụng ngơn ngữ người dùng • Hiểu trợ giúp mà người dùng cần • Hãy người dùng tự tin cách tạo dựng hệ thống an toàn Như vậy, UI đơn giản, gọn nhẹ làm bật mà người dùng muốn (mục đích sử dụng) mà người dùng cần cộng với phù hợp với thói quen người sử dụng UI tốt Tất nhiên tất cộng thêm chút " đẹp, hài hịa , lạ mắt" tốt 10