3.2.2.8. Tra cứu thơng tin bưu cục và cước phí
Hình 3. 10 Phác thảo trang tra cứu thơng tin
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 49
Hình 3. 11 Phác thảo trang thơng tin tài khoản
3.2.2.10. Chats
Hình 3. 12 Phác thảo trang chats
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 50
Hình 3. 13 Quy chuẩn thiết kế - Chữ
Giải pháp thiết kế cho ứng dụng Giao hàng tiết kiệm sẽ sử dụng một kiểu chữ mới với nhiều biến thể (in đậm, in nghiêng) để hỗ trợ việc phân cấp thơng tin, ngồi ra đây cũng là một font chữ khơng chân hiện đại, có việt hố, dễ đọc và phù hợp với nền tảng ứng dụng di động.
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 51
Hình 3. 14 Quy chuẩn thiết kế - Màu sắc – Thiết kế - Biểu tượng
Hình 3. 15 Màu sắc chủ đạo của ứng dụng Giao hàng tiết kiệm (khi chưa cải thiện) là màu xanh, ít có sự xuất hiện của các màu khác)
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 52
Hình 3. 16 Ở ứng dụng Giao hàng tiết kiệm (gốc) màu sắc phụ không được bắt mắt và đảm bảo tính thẩm mỹ
Về màu sắc ở ứng dụng Giao hàng tiết kiệm cũ chủ yếu sử dụng màu xanh, đen trên nền trắng (Hình 3.15) khiến cho ứng dụng bị nhàm chán, khơng có điểm nhấn. Mặc dù ứng dụng có sử dụng thêm một số màu khác ở hoạ tiết nhưng lại chưa được phù hợp và đảm bảo yếu tố thẩm mỹ (Hình 3.16). Do vậy để cải thiện khía cạnh màu sắc của ứng dụng này, giải pháp được đưa ra đó là vẫn giữ ngun màu chính là màu xanh lá để đảm bảo nhận diện thương hiệu, bên cạnh đó sẽ thêm vào một số màu phụ bổ trợ bao gồm vàng, đỏ và xanh dương.
Hình 3. 17 Hệ thống nút bấm (button) không đồng nhất ở ứng dụng Giao hàng Tiết kiệm khi chưa cải thiện
Về hệ thống nút bấm (Button) cũng được chuẩn hố về kích thước cũng như hình dạng để đồng bộ hơn so với ứng dụng cũ.
Hình 3. 18 Biểu tượng trang tổng quan không đồng nhất với các trang khác, biểu tượng trang đơn hàng chi tiết quá bé không hiển thị rõ
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 53
Ở ứng dụng cũ, biểu tượng (icon) được sử dụng khá nhiều tuy nhiên lại chưa được đồng bộ, hay chỗ có chỗ khơng, khơng có sự đồng nhất, do vậy giải pháp ở đây là thiết kế thống nhất lại kích thước và phong cách biểu tượng được sử dụng trong ứng dụng.
Hình 3. 19 Quy chuẩn thiết kế - Tab thanh
Theo như những điều đã phân tích ở chương II và đề xuất giải pháp ở mục 3.1 của chương 3, ứng dụng sẽ rút ngắn từ 6 mục xuỗng còn 4 mục ở tab thanh để tối ưu lại giao diện.
Hình 3. 20 Các danh mục ở tab thanh của ứng dụng Giao hàng tiết kiệm khi chưa cải thiện
Các danh mục ban đầu bao gồm: Tổng quan, Chats, Đơn hàng, Kho&Sản phẩm, Dòng tiền, Tài khoản sẽ được lược bỏ bớt thành 4 anh mục bao gồm: Trang chủ, Đơn hàng, Thông báo và Tài khoản. Các danh mục bị lược bỏ sẽ được lồng ghép vào phần trang chủ và sẽ được trình bày chi tiết tại mục 3.2.4.
3.2.4. Thiết kế giao diện ứng dụng Giao hàng tiết kiệm
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 54
Hình 3. 21 Giao diện Trang chủ, Trang đơn hàng, Trang thông báo, Trang tài khoản (từ trái sang phải)
Như đã trình bày ở mục 3.2.3, phương án cải thiện sẽ lược bỏ đi một số danh mục trong ứng dụng Giao hàng tiết kiệm bao gồm trang Kho&Sản phẩm và trang Chats. Ở đây, để thuận tiện cho người dùng truy cập được các tính năng nhanh hơn và quen thuộc hơn, tính năng chat được đặt ở góc phải phía trên của trang chủ, tính năng kho hàng và sản phẩm cũng được đặt ở trang chủ với icon minh hoạ rõ ràng, hỗ trợ người dùng dễ dàng truy cập.
Với phương án cải thiện ứng dụng Giao hàng tiết kiệm, trang chủ cịn được tích hợp thêm chức năng tìm kiếm để hỗ trợ người dùng tìm kiếm các thông tin như đơn hàng, sản phẩm hay cách hàng một cách nhanh chóng hơn so với giao diện ứng dụng cũ.
Hình 3. 22 Ứng dụng Giao hàng tiết kiệm khi chưa cải thiện khơng có chức năng tìm kiếm hỗ trợ người dùng
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 55
Vì tính chất của một ứng dụng giao hàng, nên khó có thể tránh khỏi những thông tin khô khan dày đặc, do vậy để điều tiết mắt cho người dùng, ứng dụng Giao hàng tiết kiệm sau khi cải thiện sẽ sử dụng thêm các icon, banner, giảm chữ trong phần trang chủ để đem đến cho người dùng cái nhìn trực quan.
3.2.4.2. Đăng nhập đăng ký
Giao diện đăng nhập và quên mật khẩu
Hình 3. 23 Giao diện đăng nhập và quên mật khẩu
Giao diện đăng nhập được thiết kế lại sao cho phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3.
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 56
Hình 3. 24 Giao diện đăng ký
Giao diện đăng ký được thiết kế lại sao cho phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3. Ngoài ra ở giao diện đăng ký cũng được cải thiện việc phân cấp thông tin cũng như thêm các biểu tượng để người dùng dễ hình dung. Bên cạnh đó, phân đăng ký sẽ thiết kế dưới dạng các bước thực hiện rõ ràng, giúp cho người dùng dễ dang các định được vị trí của mình hơn so với giao diện ứng dụng khi chưa được cải thiện (Hình 3.25).
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 57
Hình 3. 25 Giao diện trang đăng ký của ứng dụng Giao hàng tiết kiệm khi chưa cải thiện thiện
3.2.4.3. Đơn hàng Trang đơn hàng
Hình 3. 26 Giao diện trang đơn hàng
Trang đơn hàng được trình bày với nội dung tương tự trang đơn hàng của ứng dụng khi chưa được cải thiện, tuy nhiên được tích hợp thêm tính năng tìm kiếm đơn hàng và được chuẩn hoá lại hệ thống biểu tượng.
Phần danh mục đơn hàng cũng được chia ra thành các mục nhỏ sắp xếp dưới dạng menu ngang khiến cho người dùng truy cập xem thông tin nhanh hơn (Đối với ứng dụng khi chưa cải thiện, danh mục đơn hàng sẽ dẫn người dùng qua một trang mới, do vậy khi người dùng muốn chuyển danh mục thì sẽ phải quay trở lại trang đơn hàng, sau đó chọn danh mục mới, đối với giao diện mới người dùng chỉ cần chọn vào danh
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 58
mục, đơn hàng trong danh mục sẽ tự động sổ xuống). Phần đơn hàng hiển thị các thơng tin chính bao gồm mã đơn hàng, thống tin thu tiền, tên sản phẩm và ghi chú, các phần này được minh hoạ bởi các biểu tượng và được phân cấp thông tin rõ ràng. Bên cạnh đó, giải pháp cải thiện cịn tích hợp thêm tính năng goi cho khách hàng ngay ở phần xem trước thông tin đơn hàng để giúp người sử dụng có thể rút ngắn được các bước phải thực hiện nếu muốn gọi cho khách khàng ở ứng dụng chưa được cải thiện (Hình 3.28).
Hình 3. 27 Giao diện trang đơn hàng của ứng dụng Giao hàng tiết kiệm khi chưa cải thiện thiện
Hình 3. 28 Giao diện thơng tin đơn hàng của ứng dụng giao hàng tiết kiệm chưa cải thiện (chưa có lỗi tắt để gọi cho khách hàng)
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 59
Giao diện tạo đơn hàng mới được thiết kế lại sao cho phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3.
Hình 3. 29 Giao diện trang tạo đơn hàng mới
Giao diện tạo đơn hàng mới được thiết kế lại sao cho phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3. Ngồi ra, ở đây sẽ có thêm chức năng tạo đơn nháp khi người dùng chưa muốn đăng đơn luôn tại thời điểm tạo. Do phần tạo đơn hàng này sẽ phải điền nhiều thông tin khác nhau, do vậy phương án cải thiện đó là chia nhỏ ra thành các danh mục con bao gồm: Người gửi/người nhận, Sản phẩm dịch vụ, Thông tin chung.
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 60
Hình 3. 30 Giao diện tạo đơn hàng mới của ứng dụng Giao hàng tiết kiệm khi chưa cải thiện
3.2.4.4. Thông báo
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 61
Giao diện thông báo được thiết kế lại sao cho phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3. Giải pháp cải thiện ứng dụng sẽ thêm chức năng thông báo và để ở một trang riêng để người dùng dễ cập nhật tình hình đơn hàng, thơng tin khuyến mại hay thơng tin về tài khoản. Người dùng có thể bấm chọn để xem chi tiết thông báo và chia sẻ.
3.2.4.4. Danh bạ khách hàng, kho hàng Danh bạ khách hàng
Hình 3. 32 Giao diện trang Sổ địa chỉ - Danh bạ khách hàng
Giao diện thông báo được thiết kế mới phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3. Như đã trình bày ở mục 3.2.1, để thuận tiện hơn cho người dùng trong việc quản lý kháhc hàng, chức năng quản lý khách hàng phải được cải thiện, cụ thể ở đây là cho phép người dùng chủ động quản lý, thêm/sửa/xố thơng tin khách hàng. Ngồi ra cịn tích hợp tính năng thống kê lịch sử mua hàng, tìm kiếm truy xuất thông tin.
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 62
Hình 3. 33 Giao diện Thêm/Sửa/Xố khách hàng
Kho hàng
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 63
Giao diện kho hàng được thiết kế mới sao cho phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3. Vì thường một cửa hàng khơng chỉ giới hạn ở một kho hàng, để tăng sự thuận tiện, giải pháo là cho phép người dùng thêm địa chỉ của các kho hàng khác nhau. Ngoài ra tính năng nhập xuất cũng được minh hoạ bằng biểu tượng trực quan, dễ hiểu. Bên cạnh đó, ở đây cũng được tích hợp thêm tính năng tìm kiếm hỗ trợ người dùng truy xuất thơng tin.
Thêm/sửa/xố kho hàng
Hình 3. 35 Giao diện Thêm/Sửa/Xố kho hàng
3.2.4.6. Sản phẩm Danh mục sản phẩm
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 64
Hình 3. 36 Giao diện trang sản phẩm
Giao diện sản phẩm được thiết kế mới sao cho phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3. Giải pháp thiết kế cải thiện phân cấp thông tin rõ ràng hơn, thêm các biểu tượng minh hoạ trực quan hơn so với giao diện khi chưa cải thiện.
Hình 3. 37 Giao diện trang sản phẩm của ứng dung Giao hàng tiết kiệm khi chưa cải
thiện
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 65
Hình 3. 38 Giao diện Thêm/Sửa/Xoá sản phẩm
Giao diện thêm sản phẩm/sửa thơng tin/xố sản phẩm được thiết kế lại để phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3.
Hình 3. 39 Giao diện chi tiết sản phẩm ứng dụng Giao hàng tiết kiệm khi chưa cải thiện thiện
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 66
3.2.4.7. Tiền & đối sốt
Hình 3. 40 Giao diện Tiền&đối soát
Giao diện Tiền&Đối soát được thiết kế lại để phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3. Ngồi ra ở đây cũng tích hợp thêm tính năng tìm kiếm để thống kê lượng doanh thu giúp người dùng.
Hình 3. 41 Giao diện tiền&Đối soát của ứng dụng Giao hàng tiết kiệm khi chưa cải
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 67
3.2.4.8. Tra cứu thông tin bưu cục và cước phí Tra cứu thơng tin bưu cục
Hình 3. 42 Giao diện tra cứu thông tin bưu cục
Giao diện Tra cứu thông tin bưu cục được thiết kế mới để phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3. Chức năng này sẽ hỗ trợ người dùng tìm kiếm các bưu cục gần họ một cách nhanh nhất.
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 68
Hình 3. 43 Giao diện tra cứu thơng tin (tính trước) cước phí
Giao diện Tra cứu cước phí sốt được thiết kế mới để phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3. Chức năng này sẽ hỗ trợ người dùng tính tốn được chi phí giao hàng một các nhanh chóng.
3.2.4.9. Thông tin tài khoản
Thực hành chuyên sâu CHƯƠNG III. ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM
Vũ Phương Anh – D18TKDPT3 69
Giao diện thông tin tài khoản được thiết kế lại để phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3.
Hình 3. 45 Giao diện trang thông tin tài khoản ứng dụng Giao hàng tiết kiệm khi chưa cải thiện
3.2.4.11. Chats
Thực hành chuyên sâu KÊT LUẬN
Vũ Phương Anh – D18TKDPT3 70
Giao diện Chats được thiết kế lại để phù hợp với quy chuẩn thiết kế trình bày tại mục 3.2.3.
Hình 3. 47 Giao diện trang Chats ứng dụng Giao hàng tiết kiệm khi chưa cải thiện
TIỂU KẾT CHƯƠNG III:
Chương 3 thể hiện giải pháp thiết kế cải thiện ứng dụng Giao hàng tiết kiệm dựa trên mơ hình Thiết kế lấy người dùng làm trung tâm nói riêng và phương pháp Thiết kế lấy người dùng làm trung tâm nói chung.
Thực hành chuyên sâu KÊT LUẬN
Vũ Phương Anh – D18TKDPT3 71
KẾT LUẬN
Trong thời đại số, một trong những bước đầu tiên giúp sản phẩm của doanh nghiệp có thể đứng vững và cạnh tranh với vô vàn các đối thủ khác trên thị trường chính là chú trọng vào trải nghiệm người dùng (UX). Mơ hình Thiết kế lấy người dùng làm trung tâm (UCDC) hỗ trợ nhà thiết kế nghiên cứu, nắm bắt, thu thập thông tin để hiểu được người dùng một cách tồn diện nhất, từ đó có thể đưa ra thiết kế đáp ứng được những mong muốn hay khắc phục được những vấn đề của người dùng.
Trên cơ sở các tài liệu có sẵn, đề tài đã tổng hợp cơ sở lý thuyết về Thiết kế UX/UI nói chung và Mơ hình Thiết kế lấy người dùng làm trung tâm nói riêng. Mơ hình Thiết kế