Trong thiết kế ứng dụng thì việc xây dựng giao diện được nhận định là quan trọng nhất bởi nó ảnh hưởng rất lớn đến trải nghiệm của người dùng. Trong bài viết hôm nay, chúng ta sẽ cùng đi đến một dự án thiết kế UI/UX cho ứng dụng phục vụ an toàn giao thông để hiểu rõ hơn về vấn đề này.
Bizfly cung cấp giải pháp thiết kế app chuyên nghiệp, uy tín và theo yêu cầu dành cho mọi lĩnh vực ngành nghề. Với hơn 15 năm kinh nghiệm, nền tảng cơ sở hạ tầng top 4 Việt Nam, Bizfly App có thể mang đến cho khách hàng những ứng dụng chất lượng nhất. Liên hệ hotline 1900 636465 hoặc truy cập link website tại đây.
Dự án
Có đến hàng triệu người lái xe trên toàn thế giới thường xuyên gặp phải các tình trạng như đụng xe, va chạm xe khi đang đỗ hay thiếu thông tin về an toàn giao thông ở nhiều điểm khác nhau. Có một ý tưởng để giải quyết tình trạng này đó là tạo ra một ứng dụng cho cộng đồng tài xế để họ có thể trao đổi tin tức thực tế về các vụ tai nạn hay các địa điểm đỗ xe an toàn…
Ứng dụng này hướng đến đa dạng các đối tượng ở nhiều độ tuổi, giới tính, thể chất hay độ hiểu biết về công nghệ. Đặc biệt, người sử dụng app này có thể trải nghiệm ở trên nhiều thiết bị khác nhau.
Dự án thiết kế app phục vụ cho mục đích an toàn giao thông
Table of Contents
Kịch bản người dùng
Ứng dụng này có 3 loại kịch bản chính như sau:
- Trường hợp 1: Bạn là người chứng kiến vụ tai nạn giao thông và báo cáo nó trên cộng đồng. Người lái xe nhận được thông tin có thể phản ứng ngay lập tức.
- Trường hợp 2: Bạn là một tài xế, đang đỗ xe và nhận thông báo về nó. Khi nhận được thông báo về khu vực lân cận, bạn có thể tìm chỗ đỗ xe thích hợp và an toàn để hạn chế các vụ tai nạn ở gần khu mình để.
- Trường hợp 3: Ứng dụng giúp cảnh sát tìm được chủ xe hoặc người cung cấp thông tin một cách nhanh chóng.
Thiết kế UX
Sau đây là cách xây dựng UX cho ứng dụng trên:
Màn hình chính
Trên màn hình chính sẽ có biểu đồ để người dùng theo dõi các sự cố xảy ra gần đây và truy cập nhanh vào các tính năng trong ứng dụng.
- Tìm kiếm: Nhằm mục đích tìm kiếm nơi đỗ xe an toàn và các báo cáo trong khu vực cần thiết.
- Tab: Cho phép truy cập nhanh vào màn hình hồ sơ và báo cáo
- Nút thêm: Cho phép thêm một báo cáo mới về một vụ tai nạn.
- Tính năng ghim địa điểm: Cho phép theo dõi khu vực xung quanh một chiếc ô tô đang đỗ.
Màn hình báo cáo
Màn hình báo cáo trong ứng dụng bảo vệ an toàn giao thông
Với màn hình báo cáo, chúng ta có 2 tab đó là:
- Tất cả báo cáo: Chính là tất cả các báo cáo được thêm.
- Báo cáo của tôi: Báo báo biểu thị số xe của người dùng. Người dùng thông qua các báo cáo này để biết được báo cáo về xe của mình.
Luồng người dùng
Như bình thường thì ở bước tạo khung UX, nhà thiết kế sẽ phải xây dựng bố cục, vị trí điều hướng và các luồng tương tác trong màn hình thật rõ ràng.
Kịch bản 1
Với ứng dụng này, ta thêm một báo cáo mới trên màn hình chính để người dùng có thể chọn loại tai nạn để phân loại vào báo cáo của họ. Sau đó, một màn hình báo cáo mới sẽ mở ra và người dùng sẽ cho biết về hoàn cảnh xảy ra tai nạn. Địa chỉ sẽ được tự động cài đặt theo vị trí của người dùng tuy nhiên họ có thể thay đổi trong trường báo cáo bị chậm trễ.
Với báo cáo này thì biển số xe là thông tin bắt buộc phải có để nó kích hoạt cho chủ xe về vụ tai nạn xảy ra với xe của họ.
Kịch bản 2
Tài xế sẽ đỗ xe ở một khu vực nào đó và bật chế độ đỗ xe bằng cách ghim vị trí. Ứng dụng này sẽ nhớ vị trí mà xe để lại và bắt đầu theo dõi khu vực này. Người dùng có thể nhận được thông báo không chỉ về biển số xe của họ mà còn có cả các vụ tai nạn khác xung quanh đó được báo cáo.
Thiết kế UI
Thiết kế giao diện UI cho ứng dụng
Bảng màu và phong cách
Lựa chọn cách phối màu trên nền sáng giúp cho văn bản trở nên dễ đọc hơn. Trong khi các điểm nhấn màu sẽ dàng bắt gặp trong các điều kiện sử dụng app khác nhau. Ý tưởng ở đây chính là sử dụng các màu sắc hài hòa, thân thiện và trang nhã, không gây căng thẳng cho người dùng.
Biểu tượng tai nạn
Để minh họa cho các sự cố thì ta có thể sử dụng các biểu tượng tai nạn và chỉ định màu cụ thể để nhận biết nhanh các báo cáo trên bản đồ, màn hình khác nhau.
Máy ảnh
Những tương tác và màn hình đơn giản cũng được đưa vào để cung cấp cho người dùng các chức năng cốt lõi của ứng dụng như ảnh nhanh hay video ngắn. Bố cục tối giản và điều hướng rõ ràng cho phép bạn có thể chụp ảnh ngay lập từng thời điểm bắt đầu tai nạn.
Như vậy trên đây chính là một trong những Case Study nổi bật về việc thiết kế UI/UX cho ứng dụng phục vụ an toàn giao thông. Nhìn chung thì toàn bộ các thiết kế giao diện người dùng cho thiết bị di động đều dựa trên nguyên tắc đơn giản, trực quan và dễ đọc để làm nổi bật lên giá trị cốt lõi của trải nghiệm người dùng.
Nguồn tham khảo: Case Study: Thiết kế UI/UX cho ứng dụng phục vụ an toàn giao thông – Bizfly.vn
