II. Nội dung cụ thể
3. Chương 3: Thiết kế giao diện tương tác
3.1. Yêu cầu chung và giao diện
3.1.1 Yêu cầu chung:
A. Đối với app điện thoại thông thường
- Giao diện dễ sử dụng, thân thiện với mọi đối tượng người dùng, màu sắc hài hòa, tránh trộn lẫn các màu đối lập nhau, tránh các màu nóng sáng gây mỏi, hại mắt nếu sử dụng lâu
- Các thanh công cụ được đặt ở những vị trí dễ thấy, gọn vừa đủ, ít ảnh hưởng đến các nội dung chính của ứng dụng. Thanh công cụ chứa phím tắt của những chức năng chính, nổi bật trong phần mềm
- Chữ viết trong ứng dụng là phông chữ nổi bật, dễ đọc, dễ nhận biết. Kích thước chữ vừa đủ, không quá nhỏ đối với người sử dụng trên điện thoại
- Các lựa chọn trên trang chính giao diện được đặt vào các vùng cụ thể để tránh gây nhầm lẫn.
- Thanh lựa chọn bổ sung thường được quy ước là button 3 gạch ngang sẽ được đặt ở các vị trí mà người dùng ít khi chạm tới. Ví dụ như góc màn hình hoặc bên phải cùng của thanh công cụ
- Các nút lựa chọn trên giao diện được đóng khung trong một ô riêng hoặc được gạch chân và đổi màu nếu đang ở trong một đoạn văn bản
- Các lựa chọn gợi ý trong giao diện phù hợp với từng đối tượng người sử dụng
- Các bảng thông báo lỗi được đưa ra kịp thời
B. Đối với 1 app đặt xe
- Giao diện đơn giản, dễ sử dụng, màu sắc, hình ảnh bắt mắt, nội dung được hiển thị đầy đủ, nội bật. Các chức năng được sắp xếp theo thanh menu, hiển thị một số khuyến mại đang có, các giờ đi cao điểm, các tuyến đi và giờ đi đang có chương trình khuyến mại
- Đưa ra các bảng thông báo lỗi khi người dùng gây ra các lỗi cơ bản trong hệ thống (VD: nhập thiếu thông tin đăng ký, nhập sai thông tin so với kiểu dữ liệu mặc định, có các lựa chọn trùng lặp, v.v…)
- Đảm bảo tính thống nhất trong các ràng buộc
+ Chọn điểm đến, điểm đi => Đặt xe => Thanh toán => Xem lịch sử đặt xe => Hủy chuyến xe => Đánh giá
+ Tài xế nhận chuyến => Nhận thông tin chuyến hoặc thông tin hủy chuyến => Đón khách, hoàn thành chuyến đi => Đánh giá
- Thiết kế dựa theo nhu cầu khách hàng và kinh nghiệm của người thiết kế - Tối thiểu hóa tác vụ người dùng
- Các thuật ngữ sử dụng tự nhiên, dễ hiểu, tránh các từ ngữ chuyên môn - Dễ dàng thoát hoặc quay trở lại trang trước hoặc trang chính
3.1.2 Thiết kế giao diện
* Chọn màu nền:
- Hai màu chủ đạo là xanh dương và màu trắng
- Màu xanh dương là gam màu lạnh, Màu xanh dương là màu của biển cả và bầu trời, chính vì vậy nó mang ý nghĩa của sự bình yên, thư giãn và hoà hợp. Sử dụng màu xanh nhẹ nhàng sẽ mang lại một cảm giác thư giãn, trong khi đó một màu xanh đậm sẽ mang lại một cảm giác năng nổ.
Thông thường, các công ty sức khỏe và vệ sinh sử dụng màu xanh để tăng cường sự tươi mát và sạch sẽ. Ngoài ra, màu xanh dương cũng là màu của sự tin tưởng và an ninh.
- Trong thực tế, trắng không phải là một màu sắc mà nó là ánh sáng thuần khiết. Chính vì lý do này, nó được coi là một màu sắc khiêm tốn và không quá rực rỡ hay nổi bật để “tranh giành” sự chú ý như những màu sắc khác.
- Thường vật hoặc khu vực được tô màu trên giao diện không được hiển thị riêng biệt, mà nằm cạnh hoặc nằm chồng lên vật hoặc khu vực khác. Điều này tạo nên hiệu ứng tương phản. Nếu không đủ tương phản, chúng ta không phân biệt được các phần khác nhau trên màn hình. MS Word, Powerpoint, Excel, Outlook v.v. dựa trên nền trắng chữ đen là có lí do - độ tương phản mạnh nhất và do đó dễ đọc nhất. - Ngoài ra, tương phản màu sác có thể được dùng một cách có tính toán để thu hút sự chú ý về giác quan của người dùng đến phần tử giao diện quan trọng hoặc cần nhập dữ liệu và tương tự như màu đen trên nên trắng thì màu xanh dương cũng là loại màu có thể được sử dụng kết hợp với màu trắng để làm nổi bật các chi tiết. Vì màu nền chủ đạo là màu xanh nước biển nên màu chữ phải để màu trắng để nổi bật chữ đó lên đồng thời để gây sự chú ý của người sử dụng , sẽ khiến người sử dụng chú ý và đọc , tìm hiểu.
* Kiểu chữ, cỡ chữ
- Kiểu chữ chung của chương trình là Verdana
Bởi vì: San-Serift font: Font không chân, tiêu biểu là Calibri, Verdana. Font này thường được dùng để hiển thị giao diện, title, button, vì chúng dễ đọc dù ở size nhỏ.
- Cỡ chữ: Tùy thuộc vào từng chức năng của chương trình và bố cục của chức năng.
- Logo của chương trình biểu hiện chức năng chính của phần mềm, logo của chương trình là một chiếc xe được cách điệu, đi kèm với chữ MTA, do đây là ứng dụng đặt xe được tạo bởi nhóm học viên trường MTA.
- Màu chủ đạo của logo là đen và xanh thẫm (giống với màu chủ đạo của chương trình) màu đen nổi bật tên nền xanh.
- Các biểu tượng khác chọn phù hợp với từng chức năng riêng của hệ thống gọi xe công nghệ
- Logo có thê được thay đổi màu sắc bên trong sao cho phù hợp với mày nền tong từng trang hay quảng cáo.
a. Giao diện chính: 2 phần.
Mô tả Hiển thị
- Đặt xe và hiện thị bản đồ nơi đặt xe (Do đây là phần mềm đặt xe nên chức năng chính của chương trình của chương trình là bản đồ đặt xe, thông thường hầu hết người dùng sẽ truy cập khi có nhu cầu đặt xe, do vậy, hiển thị màn hình đặt xe ở ngay giao diện trang chủ sau khi đăng nhập của chương trình)
+ Phần địa điểm bắt đầu đặt xe được hiển thị dựa theo vị trí, có thể chọn thêm các vị trí thường đến để có thể đặt xe nhanh chóng hơn, tránh việc phải chọn lại vị trí mới
- Thanh menu dưới để điều hướng đến các chức năng khác nhau của chương trình
- Bố cục
+ Gồm thanh điều hướng (nền màu xanh) và button để hiện menu chức năng của chương trình
+ Bản đồ khu vực đặt xe + Vị trí đến và đi
- Giao diện giúp cho người đọc có thể đặt xe nhanh chóng nhất có thể khi người dùng đang vội, bằng cách chỉ nhập điểm đến và đi khi vừa vào giao diện chính
*Khi ấn vào phần cá nhân (icon người)
+ Hiển thị lên thông tin cơ bản nhất của người dùng ứng dụng ở phía bên trên. Gồm họ tên và số điện thoại người dùng
+ Phần nội dung chính có các lựa chọn để điều hướng đến giao diện mong muốn. Thường các lựa chọn này ít được sử dụng trong phần mềm như:
+ thông tin cá nhân (ít có sự thay đổi)
+ hỗ trợ (ít được sử dụng)
+ hộp thư (lưu trữ các phản hồi từ đội ngũ hỗ trợ người dùng)
+ cài đặt (chỉ sử dụng khi người dùng muốn thay đổi màu sắc các thành phần theo ý muốn. VD: ngôn ngữ)
* Khả năng điều hướng
- Khả năng điều hướng từ giao diện chính đến các giao diện mong muốn được tối ưu nhất có thể
- Thanh công cụ phía dưới có các chức năng cơ bản nhất của 1 ứng dụng đặt xe công nghệ: + Button trang chủ : truy cập vào giao diện đặt xe
+ Button lịch sử : truy vấn xem các chuyến xe mà người dùng đã đặt, từ đó có thể tự kiểm soát được lượng đi của bản thân cũng như có thể hủy chuyến đi nếu mong muốn + Button khuyến mại : người dùng có thể vào để xem các khuyến mại đang có của ứng dụng hoặc các khuyến mại đang có được dành riêng cho bản thân
b. Giao diện chờ(Chờ khi đăng nhập hoặc thoát khỏi hệ thống)
- Hai màu chủ đạo là xanh dương và màu trắng kết hợp với màu đen #000000 làm nổi bật logo
- Đây là logo của hệ thống, do đây là ứng dụng gọi xe, nên logo có hình chính là chiếc xe, màu trắng. Logo được đặt giữa màn hình, nổi bật vào mắt người nhìn
- MTA là tên của nhóm tạo ra ứng dụng
- Do đây là ứng dụng gọi xe, nên được đặt tên là MTA
- Do ứng dụng cần phải khởi động và load dữ liệu từ server nên đây chính là giao diện khi chờ ứng dụng được khởi động (có con xoay ở cuối giao diện)
c. Giao diện đăng nhập- Đăng ký.
Khi khởi động chương trình, giao diện mở đầu của ứng dụng được đưa ra. Nếu người dùng chưa từng tải ứng dụng thì có thể chọn “Bắt đầu” để chuyển vào giao diện đăng ký tài khoản mới.
Nếu đã có sẵn tài khoản của ứng dụng thì có thể chọn “Đăng nhập” để chuyển qua trang đăng nhập
Chỉ khi hoàn thành đăng nhập hệ thống nhập thì mới có thể chuyển đến giao diện màn hình chính của phần mềm.
Trong giao diện của trang đăng nhập và đăng ký để có button để chuyến qua lại
giữa 2 giao diện nếu người dùng muốn thay đổi
Màn hình đăng nhập gồm: - Ô nhập tên tài khoản - Ô nhập mật khẩu - Nút đăng nhập - Nút quên mật khẩu
3.2. Điều hướng
3.2.1 Khách hàng:
Từ menu đăng nhập, nếu không có tài khoản có thể lựa chọn đăng ký tài khoản.
Sau khi đăng ký xong quay về đăng nhập
Đăng nhập thành công sẽ vào được màn hình chính Khi vào màn hình chính:
Màn hình chính là màn hình đặt xe(chức năng chính).Trên thanh công cụ có các lựa chọn:
* Trang chủ * Đặt xe
+ Có thể vào giao diện khuyến mãi để lựa chọn khuyến mãi, sau khi lựa chọn được sẽ quay về giao diện đặt xe
+ Nếu đặt xe thành công, chuyển sang giao diện đặt xe o Nếu muốn liên hệ tài xe Sang giao diện liên hệ
o Nếu muốn hỗ trợ Hỗ trợ phía công ty
o Nếu muốn hủy chuyến Sang giao diện hủy chuyến, hủy chuyến thành công, về giao diện đặt. Hoặc có thể truy vấn vào lịch sử chuyến đi, sau đó chọn vào chuyến và ấn hủy, hủy chuyến thành công và trở lại giao diện xem lịch sử chuyến đi
o Nếu hoàn thành chuyến xe
a. Người dùng có thể lựa chọn đánh giá chuyến xe, sau khi đánh giá xong về giao diện đặt xe
b. Người dùng có thể lựa chọn tiếp tục đặt xe
o Người đặt xe có thể trực tiếp đặt xe, sau khi chọn xong điểm đi điểm đến, có thể sang giao diện:
a. Chọn khuyến mãi và đặt xe b. Hủy chuyến
c. Liên hệ tài xế
o Sau khi hoàn thành chuyến xe, giao diện sẽ chuyển sang giao diện đánh giá
* Menu chính
Điểm tích lũy Thông tin cá nhân Giới thiệu và ưu đãi Cài đặt
Hộp thư Hỗ trợ:
a. Thông tin liên hệ
b. Gửi thư phản hồi- Thư hỗ trợ .
* Khuyến mại:
Người đặt xe có thể lựa chọn xem các ưu đãi mà mình có trước, sau khi lựa chọn đực ưu đãi thì chuyển sang giao diện đặt xe.
* Lịch sử:
-Trong lịch sử, người đặt xe có thể chuyển sang giao diện hỗ trợ khi chuyến xe có vấn đề như tiền sai, phản hồi lại về tài xế, sẽ vào giao diện gửi thư hỗ trợ
- Hoặc người đặt xe có thể chuyển sang giao diện đánh giá, để đánh giá về chuyến xe đã đi.
- Chuyến đã đặt, chuyến đã hoàn thành, chuyến đã hủy, chuyến chưa hoàn thành
3.2.2 Lái xe:
+ Giao diện đầu tiên của lái xe nhìn là giao diện đăng nhập/đăng
- Nếu chưa có tài khoản, lái xe có thể lựa chọn đăng ký tài khoản. Đăng ký xong trở lại đăng nhập.
- Nếu đã có tài khoản trước đó thì có thể đăng nhập vào phần mềm luôn hoặc lựa chọn đăng ký để đăng ký mới một tài khoản khác. Đăng ký mới xong trở lại đăng nhập.
+ Đăng nhập thành công sẽ vào được giao diện chính của phần mềm. + Tại giao diện chính sẽ có các lựa chọn:
* Lịch sử:
+ Trong lịch sử, lái xe có thể xem danh sách các chuyến mà người dùng đã huỷ, chuyến đã hoàn thành, chuyến đang thực hiện hoặc chuyến vừa xác nhận khách hàng thành công.
+ Hoặc lái xe có thể chuyển sang giao diện hỗ trợ khi thấy chuyến đi của mình có vấn đề, phản hồi lại với admin trong giao diện gửi thư hỗ trợ.
+ Ngoài ra, lái xe có thể chuyển sang giao diện đánh giá để đánh giá về người dùng.
* Menu chính:
+ Trong menu chính, lái xe có thể xem thông tin tài khoản cũng như điểm tích luỹ của mình và thông tin cá nhân; cài đặt để chỉnh sửa thông tin tài khoản/cá nhân; xem hộp thư, xem giới thiệu và ưu đãi của hệ thống. Ngoài ra lái xe còn có thể theo dõi thu nhập của mình trong giao diện thu nhập.
+ Hoặc lái xe có thể chọn giao diện hỗ trợ để xem thông tin liên hệ của hệ thống, xem thư trả lời của hệ thống (nếu trước đó lái xe đã gửi thư hỗ trợ). Nếu vẫn còn thắc mắc, lái xe có thể tiếp tục liên hệ với hệ thống để giải đáp thắc mắc thông qua giao diện gửi thư hỗ trợ.
+ Đối với lái xe không thích gửi thư hỗ trợ thì trong giao diện hỗ trợ có thể gọi trực tiếp đến hệ thống thông qua giao diện gọi bộ phận CSKH.
* Đón khách:
+ Trong giao diện đón khách, nếu người dùng hủy chuyến, hệ thống sẽ thông báo đến lái xe, lái xe có thể xác nhận yêu cầu hủy chuyến của người dùng. Dữ liệu về chuyến xe hủy được lưu vào lịch sử.
+ Nếu đón khách thành công, lái xe sẽ chuyển sang giao diện bản đồ hiển thị quãng đường mà người dùng đã chọn.
+ Sau khi hoàn thành chuyến đi, lái xe vào giao diện thanh toán để xác nhận thanh toán người dùng. Sau khi hoàn thành chuyến xe và xác nhận người dùng đã thanh toán, giao diện sẽ chuyển sang giao diện đánh giá. Lái xe có thể chọn đánh giá khách hàng, sau khi đánh giá xong trở về giao diện đón khách. Dữ liệu về chuyến xe vừa đi được lưu lại trong lịch sử.
+ Giao diện đầu tiên của admin là đăng nhập. Đăng nhập thành công sẽ vào được giao diện chính của phần mềm.
+ Tại giao diện chính sẽ có các lựa chọn:
* Quản lý hệ thống giao diện:
Trong quản lý hệ thống giao diện, admin có thể chỉnh sửa hệ thống dựa vào đánh giá của khách hàng hoặc những sự cập nhật phần mềm mới sao cho phù hợp.
* Thu nhập tài xế:
Trong thu nhập tài xế, admin có thể quản lý mức lương tài xế, cũng như theo dõi tiến độ làm việc của tài xế: số cuốc xe/ngày, v.v…
* Hỗ trợ:
Trong giao diện hỗ trợ, admin có thể tiếp nhận và giải đáp những thắc mắc, yêu cầu hỗ trợ từ người dùng cũng như từ tài xế.
* Thống kê:
Trong giao diện thống kê, admin có thể xem các thống kê liên quan đến dịch vụ của mình như thống kê thu nhập tài xế, số lượng đặt xe, chất lượng chuyến đi, số lượng khách hàng sử dụng.
* Quản lý thông tin hệ thống:
Trong quản lý thông tin hệ thống, admin có thể theo dõi và kiểm soát thông tin nhà phát triển, thông tin hướng dẫn, thông tin gợi ý, quảng cáo, thông tin người dùng.
3.3. Chức năng cụ thể.
3.3.1. Chức năng đặt xe- Đinh Công Hiển.3.3.1.1. Mô hình giao diện của chức năng