TỔNG QUAN UI, UX
UI là gì?
UI là viết tắt của từ User Interface có nghĩa là giao diện người dùng. Hiểu một cách đơn giản nhất thì UI bao gồm tất cả những gì người dùng có thể nhìn thấy như: màu sắc, bố cục sắp xếp như thế nào, ứng dụng sử dụng fonts chữ gì, hình ảnh trên ứng dụng có hấp dẫn hay không,
Hình 2-1 Giao diện người dùng trực quan và tương tác dễ dàng
Trong thiết kế thì UI đóng vai trò là yếu tố truyền tải thông điệp từ người thiết kế sản phẩm tới người dùng Thiết kế giao diện người dùng tốt sẽ hỗ trợ khả năng sử dụng với bố cục và nội dung trực quan, rõ ràng, nhất quán, cung cấp cho người dùng chỉ dẫn, cử chỉ và gợi ý để giúp người dùng hoàn thành nhiệm vụ trong khi giảm thời gian thực hiện công việc.
Một nhà thiết kế UI thường chủ yếu chú trọng trong các vấn đề sau:
• Biểu tượng, logo, nút và các yếu tố liên quan khác;
• Tạo bố cục thân thiện và hấp dẫn người dùng;
• Xây dựng kịch bản sử dụng.
• Phối hợp với UX design;
• Phối hợp với các nhà phát triển sản phẩm.
UX là gì?
UX là viết tắt của từ User Experience có nghĩa là trải nghiệm người dùng. Đơn giản hơn thì UX là những đánh giá của người dùng khi sử dụng sản phẩm. Chẳng hạn như: App có dễ sử dụng hay không, có thân việc bố trí sắp xếp bố cục như vậy đã được hay chưa? Sản phẩm đó có đạt được mục đích đề ra không.
Hình 2-2 Trải nghiệm người dùng tinh tế và xuyên suốt
Người làm về UX hay còn gọi là UX Designer UX Designer sẽ nghiên cứu và đánh giá về thói quen và cách mà khách hàng sử dụng rồi đánh giá về sản phẩm nào đó Sử dụng và đánh giá ở đây đơn giản là những vấn đề: tính dễ sử dụng, sự tiện ích, sự hiệu quả khi hệ thống hoạt động
Một nhà thiết kế UX thường chủ yếu chú trọng trong các vấn đề sau:
• Nghiên cứu nhu cầu người dùng;
• Tạo ra các khung lưới logic của giao diện;
• Thử nghiệm bản mẫu - demo;
• Viết thông số kỹ thuật thiết kế;
• Phối hợp với nhà thiết kế giao diện người dùng;
• Phối hợp với các nhà phát triển sản phẩm.
Sự khác biệt của UX và UI
Tóm lại, sự khác biệt giữa UX và UI là:
• Nhà thiết kế UX lên kế hoạch cách người dùng sẽ tương tác với giao diện và những bước anh ta cần thực hiện để làm gì đó.
• Và người thiết kế UI đưa ra cách mỗi bước sẽ trông như thế nào.
Chính vì UX và UI có liên quan chặt chẽ đến mức đôi khi ranh giới giữa các khái niệm lấn át lẫn nhau Do đó, cả UX và UI thường được thực hiện bởi một nhà thiết kế.
Công việc của UX design trong dự án
Nhà thiết kế UX có thể tham gia vào bất kỳ giai đoạn nào của dự án. Nhưng thường hữu ích nhất trong các giai đoạn thiết kế, trước khi các lập trình viên thực sự bắt đầu quá trình code.
Hình 2-3 Nhà thiết kế UX trong quá trình tạo dự án
Công việc của UI design trong dự án
Quy trình cơ bản của một nhà thiết UI trong dự án thường gồm 4 bước:
Hình 2-4 Nhà thiết kế UI trong quá trình tạo dự án
Có thể được hiểu cơ bản là quá trình phác thảo nhanh ý tưởng lên giấy hoặc bảng Ở bước này sẽ giúp cho nhà thiết kế lên ý tưởng dễ dàng, với những ý tưởng mới, sketch bằng tay là cách hiệu quả nhất để các thành viên trong team thảo luận, đóng góp ý kiến Và đây là bước cần thiết để đến giai đoạn Wireframe.
Hình 2-5 Sketch là phác thảo nhanh ý tưởng lên giấy hoặc bảng
Mô tả chức năng của dự án, bao gồm các mối quan hệ giữa các khung nhìn và màn hình, tương tác giữa người dùng với các nút nhất định, cũng như cách thức các màn hình phản hồi tương tác của người dùng.
Hình 2-6 Wireframe giúp mô tả chức năng của dự án
5.3 Mockup Ở giai đoạn này nhà thiết kế sẽ thêm màu sắc, phông chữ, văn bản, hình ảnh, logo và bất cứ thứ gì khác cần thiết vào Wireframe.
Hình 2-7 Mockup là thêm các yếu tố thiết kế vào wireframe
Prototype là một mockup nhưng có thêm phần UX Có nghĩa là ta có thể click vào một button, có thể chuyển screens, có thể show dữ liệu giả
Hình 2-8 Prototype là một mockup nhưng có thêm phần UX
Phân tích thiết kế hệ thống
Xác định tác nhân
Người dùng Hệ thống khác
Khách hàng Hệ thống Google Pay, Napas, Thanh toán quốc tế.
Bảng 3-1 Xác định tác nhân hệ thống
• Khách hàng : Đăng kí - Đăng nhập tài khoản, Quên mật khẩu tài khoản, Gửi thông tin đăng ký nhận nuôi và Đăng ký quyên góp bảo vệ trẻ em;
• Phần mềm hỗ trợ thanh toán qua mạng bằng cách kết nối với “hệ thống thanh toán trực tuyến”.
Use-case tổng quát
Ứng dụng AdoptKids được cấu thành từ các màn hình:
• Đăng ký tài khoản: người dùng mới chưa có tài khoản cần đăng ký một tài khoản để sử dụng ứng dụng;
Sau khi đăng ký tài khoản hoặc đã sở hữu sẵn, người dùng có thể đăng nhập bằng cách nhập số điện thoại và mật khẩu Khi thông tin được xác thực chính xác, người dùng sẽ được chuyển đến màn hình chính của tài khoản.
• Quên mật khẩu tài khoản: người dùng nhập số điện thoại đã đăng ký trước đó và nhập mã OTP được hệ thống gửi về qua số điện thoại đó để tiến thành bước reset lại mật khẩu tài khoản.
• Gửi thông tin đăng ký nhận nuôi: người dùng đăng ký thông tin cá nhân của mình để nhận nuôi đứa trẻ và hệ thống sẽ gửi thông tin về server để duyệt hồ sơ.
• Đăng ký quyên góp bảo vệ trẻ em: hiển thị thông tin về chương trình quyên góp và người dùng sẽ sử dụng hệ thống thanh toán trực tuyến để chuyển khoản tiền quyên góp của người dùng về hệ thống.
• Thanh toán: người dùng điền các thông tin thanh toán cần thiết để hệ thống xác nhận tài khoản thanh toán của người dùng.
Hình 3-1 Use-case tổng quát
Người dùng cuối có các quyền như sau:
• Hỗ trợ trực tuyến từ tư vấn viên;
• Xem thông tin nhận nuôi và đăng ký nhận nuôi;
• Xác thực danh tính tài khoản người dùng Bao gồm: Khôi phục mật khẩu, Đăng ký/Đăng nhập tài khoản;
• Thanh toán quyên góp hỗ trợ nhiều tài khoản và thẻ nội địa, quốc tế.
Hình 3-2 Sơ đồ Use-Case
Activity Diagram kiểm tra lịch sử quyên góp: Hỗ trợ hiển thị lịch sử quyên góp và xem chi tiết giao dịch đó.
Activity Diagram kiểm tra trạng thái nhận nuôi: Hiển thị danh sách đơn nhận nuôi và trạng thái duyệt đơn.
Hình 3-3 Activity Diagram kiểm tra lịch sử quyên góp và trạng thái nhận nuôi
Activity Diagram đăng ký nhận nuôi: Trước khi đăng ký nhận nuôi, người dùng cần chấp nhận các điều khoản về việc xử lý hồ sơ của ứng dụng và trước đó người dùng cần chọn một trẻ nhận nuôi để tiến thành các bước đăng ký hồ sơ cần thiết Sau khi điền thông tin xong, hệ thống kiểm tra lại các thông tin được điền đã đúng và đủ chưa Nếu mọi thứ đều ổn, gửi thông tin lên server Nếu không thì sẽ báo lỗi chi tiết cho người dùng.
Hình 3-4 Activity Diagram Đăng ký nhận nuôi
Activity Diagram thanh toán tiền quyên góp: Người dùng chọn một chương trình quyên góp được cung cấp bởi ứng dụng, sau đó nhập số tiền muốn quyên góp, chọn nguồn tiền như tài khoản nội địa hay quốc tế Và sau đó bấm thanh toán để hệ thống kiểm tra thông tin thanh toán chính xác chưa. Nếu thông tin thanh toán chính xác và được xác thực thì ứng dụng sẽ thực hiện thanh toán và hiển thị hóa đơn Ngược lại, sẽ hiển thị thông báo chi tiết về lỗi cho người dùng.
Hình 3-5 Activity Diagram thanh toán tiền quyên góp
Activity Diagram tìm kiếm trung tâm bảo trợ trẻ em: Người dùng sẽ nhập thông tin tìm kiếm hoặc tìm các trung tâm bằng việc duyệt các danh sách trung tâm có liên kết tới hệ thống Sau đó người dùng sẽ duyệt các thông tin nhận nuôi mà những trung tâm này đăng lên trên hệ thống Ứng dụng còn hỗ trợ người dùng lưu lại những trung tâm mà người dùng quan tâm.
Hình 3-6 Activity Diagram tìm kiếm trung tâm bảo trợ trẻ em
Activity Diagram xác thực: Khi được mở lên, ứng dụng sẽ kiểm tra xem token đăng nhập của người dùng đã tồn tại trước đó chưa Nếu có sẽ chuyển người dùng tới màn hình ứng dụng Nếu chưa sẽ chuyển người dùng tới màn hình đăng nhập và đăng ký để hỗ trợ người dùng đăng nhập vào hệ thống.
Hình 3-7 Activity Diagram xác thực người dùng
Thiết kế giao diện ứng dụng
Giới thiệu Figma
Figma là một phần mềm biên tập đồ họa vector và dựng prototype. Figma chủ yếu hoạt động trên nền web và trên các nền tảng desktop cho hệ điều hành macOS và Windows.
Hình 4-1 Logo phần mềm Figma
Các ưu điểm của Figma:
• Thiết kế thời gian thực: hỗ trợ làm việc nhóm cho phép nhiều người cùng làm việc trên 1 project;
• Data được lưu trên hệ thống việc ở khắp nơi, ở các máy tính file design riêng; máy chủ của Figma: hỗ trợ làm khác nhau mà không cần sử dụng
• Thiết kế dạng Vector: đây là điều mà các tools design hiện đại đang làm, và khi thực hiện xong có thể export ra nhiều kiểu file như SVG, PNG, JPG….ở nhiều kích thước khác nhau mà không bị vỡ hình;
• Có thể quản lí nhiều artboards cùng 1 lúc: nhiều màn hình trên 1 khung hình Tức là
Figma có thể thiết kế có thể thiết kế nhiều layout cho sản phẩm trên 1 khung hình;
• Có cơ chế quản lí comment tại nhiều điểm: Khi có ý kiến với 1 số điểm trên màn hình layout, chỉ cần click vào đó và comments, các thành viên khác có thể đọc được và phản hồi.
Chi tiết màn hình của 1 Project trong Figma:
• Phần 1 - khung: bên trái là list các artboards (các màn hình giao diện), có thể cùng 1 lúc thiết kế hàng chục artboards trên cùng 1 khung hình;
• Phần 2 - khung giữa: là khung view để vẽ trực tiếp trên đó;
• Phần 3 - khung bên phải: là phần các option căn chỉnh các thông số cho thiết kế, có các tab như design, prototype, code…
Hình 4-2 Chi tiết màn hình của 1 Project trong Figma
Thiết kế Wireframe
Thiết kế wireframe là một bước quan trọng trong bất kỳ quá trình thiết kế giao diện nào Nó chủ yếu cho phép người thiết kế xác định thứ bậc thông tin của thiết kế, giúp họ lên bố cục được dễ dàng hơn theo cách mà ta muốn người dùng xử lý thông tin.
Wireframe là công cụ thiết yếu trong quá trình thiết kế và phát triển sản phẩm, phục vụ giao tiếp giữa lập trình viên, quản lý sản phẩm và nhà thiết kế Chúng giúp mọi người dễ dàng hiểu và thực hiện các thay đổi về giao diện, đảm bảo quá trình triển khai nhanh chóng và hiệu quả.
• Cấu trúc (Structure) - Header, sidebar, footer, được đặt như thế nào?
• Nội dung (Content) - Trang này sẽ hiện cái gì lên?
• Hệ thống phân cấp thông tin (Informational hierarchy) - Tổ chức thông tin và cách hiển thị?
• Chức năng (Functionality) - Giao diện thể hiện chức năng ra sao?
• Cách ứng xử (Behavior) - Cách người dùng tương tác với giao diện.
Wireframe có thể được thực hiện nhanh trên giấy hoặc là máy tính Và không bao gồm việc thể hiện chi tiết giao diện như màu sắc, nội dung hình ảnh,
2.2 Các kiểu thiết kế Wireframe
Block diagrams cung cấp các thông tin cơ bản nhất của một wireframe: bố cục, các loại nội dung hoặc các chức năng cơ bản mà người thiết kế muốn thể hiện Kiểu wireframe này không cần đi sâu vào chi tiết, chỉ cần tập trung vào tổng quát cái nhìn của sản phẩm.
Hình 4-3 Wireframe dạng Block Diagrams
Cách này giúp wireframe chân thực hơn nhưng không đi quá sâu vào các chi tiết đồ họa Để thể hiện rõ ràng hơn, dùng những đoạn văn thật (không phải "lorem ipsum"), chiều dài đoạn văn, font chữ lý tưởng, kích thước,
Hình 4-4 Wireframe high-fidelity text
High-Fidelity Color Đây là một cách khác để làm wireframe chân thực hơn mà không đi quá sâu vào các chi tiết đồ họa Có nghĩa là ta có thể thêm màu sắc vào background, nút, đoạn văn để nhấn mạnh hành động mong muốn hoặc User Flows Nhưng hãy sử dụng chúng một cách cẩn thận để tránh lãng phí thời gian và bị phân tâm những chi tiết.
Hình 4-5 Wireframe high-fidelity color
High-Fidelity Media Đây cũng là một cách khác để làm wireframe chân thực hơn mà không đi quá sâu vào các chi tiết đồ họa Có nghĩa, nhà thiết kế có thể chèn hình ảnh, video,… Điều này giúp nhấn mạnh nội dung, tác động đến cấu trúc và hệ thống phân cấp thông tin tổng thể của wireframe.
Hình 4-6 Wireframe high-fidelity media
2.3 Thiết kế Wireframe cho AdoptKids
Dựa trên những nghiên cứu chi tiết về wireframe như đã trình bày, tôi đề xuất thiết kế wireframe với nhiều luồng thông tin Bằng cách này, ý tưởng sẽ được thể hiện rõ ràng hơn, đồng thời đơn giản hóa quá trình tạo mockup chi tiết sau này.
Hình 4-9 Wireframe màn hình Tổng quan
Hình 4-10 Wireframe màn hình nhận nuôi
Hình 4-11 Wireframe màn hình Thông báo và Blog\
Hình 4-12 Wireframe màn hình Thông tin nhận nuôi
Hình 4-13 Wireframe màn hình Đăng ký nhận nuôi
Hình 4-14 Wireframe màn hình Yêu thích và Tìm kiếm
Hình 4-15 Wireframe màn hình Quyên góp và Thông tin quyên góp
Hình 4-16 Wireframe màn hình Thanh toán
Hình 4-17 Wireframe màn hình Splash screen Quyên góp
Hình 4-18 Wireframe màn hình Hỗ trợ
Hình 4-19 Wireframe màn hình thông tin đơn nhận nuôi
Hình 4-20 Wireframe màn hình Giải đáp vấn đề và Chat tư vấn
Hình 4-21 Wireframe màn hình Tài khoản và Quản lý thẻ
Hình 4-22 Wireframe màn hình Chi tiết giao dịch
Thiết kế User Flow
User flow được dựa trên hành vi của người dùng xuyên suốt trong quá trình sử dụng sản phẩm, lập bản đồ cho người dùng theo từng bước từ lúc bắt đầu cho đến bước tương tác cuối cùng.
Có rất nhiều cách khác nhau mà người dùng có thể thực hiện khi tương tác với sản phẩm Việc mô tả quá trình sử dụng sản phẩm cho phép designers đánh giá và tối ưu hoá trải nghiệm người.
3.2 Tại sao cần User Flow?
Thiết kế giao diện trực quan
Hỗ trợ rút ngắn luồng đi của người dùng trong quá trình sử dụng sản phẩm Đồng thời tạo nhiều luồng đi mà người dùng có thể đi để hoàn thành nhiệm vụ User flows miêu tả các mẫu có thể giúp cho các nhà thiết kế dễ dàng đánh giá sự hiệu quả của giao diện mà họ tạo ra. Đánh giá các giao diện hiện có
Với các sản phẩm đã phát hành, biểu đồ luồng người dùng giúp xác định những yếu tố đang hoạt động hiệu quả, những yếu tố chưa hiệu quả và những khu vực cần cải thiện Biểu đồ này hỗ trợ nhận dạng lý do khiến người dùng trì hoãn tại một điểm cụ thể và các biện pháp có thể thực hiện để khắc phục vấn đề đó.
Trình bày sản phẩm của bạn cho khách hàng hoặc đồng nghiệp
User flow cũng dễ dàng truyền đạt các luồng đi của sản phẩm tới các thành viên trong nhóm phát triển lẫn người dùng Giúp đội thiết kế hình dung được cách người dùng di chuyển trong sản phẩm.
Người dùng sẽ bắt đầu bằng màn hình chào mừng Splash Screen với 2 nút Đăng nhập và Đăng ký.
Khi nhấn nút đăng nhập, người dùng sẽ được chuyển tới màn hình Login Screen để xác thực ➔ thành công ➔
Chuyển tới màn hình Home Screen.
Khi nhấn nút đăng nhập, người dùng sẽ được chuyển tới màn hình Register Screen ➔
Hoàn thành việc điền thông tin ➔
Xác nhận số điện thoại bằng mã OTP ➔
Chuyển tới màn hình Home Screen.
Hình 4-23 User flow Xác thực
3.3.2 User Flow màn hình Tổng quát
Tại màn hình Home Screen (Màn hình Tổng quát) có 2 phần chính gồm Header, Body.
Header có lời chào, nút thông báo để hiển thị danh sách thông báo gần đây và slideshow để chạy quảng bá các thông tin nổi bật từ Blog Screen.
Body có 2 phần là Nổi bật và Blog.
• Phần nổi bật hiển thị danh sách những đứa trẻ nổi bật Khi một thẻ được chọn ➔
Chuyển tới màn hình Chi tiết về đứa trẻ đó Khi nhấn nút Xem thêm tại phần này ➔
Chuyển tới màn hình Adopt Screen.
• Phần Blog hiển thị các bài Blog, Tin tức liên quan đến AdoptKids.
Khi nút Xem thêm được nhấn ➔
Chuyển tới màn hình Blog Screen.
Hình 4-24 User flow màn hình Tổng quát
3.3.3 User Flow màn hình Nhận nuôi
Người dùng sẽ khởi động tại màn hình Adopt để truy cập nhiều tính năng như Danh sách yêu thích, Tìm kiếm, Thông báo Màn hình này hiển thị trẻ em nổi bật theo dạng thẻ trong chế độ xem Lưới, đưa ra gợi ý trẻ em trong chế độ xem Danh sách và hiện các chủ đề phổ biến về nhận con nuôi từ Blog trong chế độ xem Lưới.
Bấm vào nút trái tim ➔
Hiển thị danh sách những đứa trẻ đã yêu thích trước đó.
Bấm vào nút kính lúp ➔
Hiển thị màn hình tìm kiếm với những tuỳ chọn tìm kiếm nâng cao được chuẩn bị sẵn.
Bấm vào nút hình chuông ➔
Hiển thị danh sách các thông báo gần đây.
Grid view nổi bật, List view gợi ý các đứa trẻ
Hiển thị dạng thẻ hình ảnh những đứa trẻ nổi bật ➔
Chuyển tới màn hình thông tin cơ bản về đứa trẻ đó ➔
Nút Xem chi tiết được bấm ➔
Một thẻ overlay xuất hiện hiển thị thông tin chi tiết cùng với 2 nút Yêu thích (trái tim) và nút Đăng ký nhận nuôi Nút đăng ký nhận nuôi được chọn ➔
Chuyển tới màn hình đăng ký để điển các thông cần thiết ➔ Ấn nút đăng ký để gửi thông tin lên server ➔
Thông báo hoàn tất xuất hiện.
Grid view chủ đề phổ biến
Hiển thị các chủ đề blog được quan tâm nhiều nhất Nút xem thêm được bấm ➔
Chuyển tới màn hình Blog Screen.
Hình 4-25 User flow màn hình Nhận nuôi
3.3.4 User Flow màn hình Quyên góp
Người dùng sẽ bắt đầu tại màn hình Donation Screen Gồm có các chức năng như nút quyên góp quỹ bảo trợ trẻ em; nút quyên góp định kỳ theo tháng; List view hiển thị các trường hợp khó khăn cần quyên góp.
Nút quyên góp quỹ bảo trợ trẻ em
Chuyển tới màn hình Splash Screen để giới thiệu về chương trình quyên góp ➔
Nút quyên góp được nhấn ➔
Chuyển tới màn hình Quyên góp để đóng góp tiền vào quỹ ➔
Nút thanh toán được ấn ➔
Chuyển tới màn hình hoá đơn để xác nhận ➔
Hiển thị thông báo giao dịch thành công.
Nút quyên góp định kỳ theo háng
Chuyển tới màn hình Splash Screen để giới thiệu về chương trình quyên góp ➔
Nút quyên góp được nhấn ➔
Chuyển tới màn hình Quyên góp để đóng góp tiền vào quỹ ➔
Nút thanh toán được ấn ➔
Chuyển tới màn hình hoá đơn để xác nhận ➔
Hiển thị thông báo giao dịch thành công.
List view hiển thị các trường hợp khó khăn
Khi một trường hợp được chọn ➔
Chuyển tới màn hình thông tin chi tiết về trường hợp đó Có 2 nút chức năng gồm Quay lại và Quyên góp Nút quyên góp được nhấn ➔
Chuyển tới màn hình Quyên góp để đóng góp tiền vào quỹ ➔
Nút thanh toán đượ c ấn ➔ Chuyển tới màn hình hoá đơn để xác nhận ➔
Hiển thị thông báo giao dịch thành công.
Hình 4-26 User flow màn hình Quyên góp
3.3.5 User Flow màn hình Hỗ trợ
Người dùng sẽ bắt đầu tại màn hình Support Screen Gồm có các chức năng như nút thông báo; Grid view hiển thị các bài liên quan đến vấn đề hỗ trợ nhận nuôi; List view các vấn đề thường gặp; nút đơn nhận nuôi; nút gọi điện hỗ trợ; nút chat trực tuyến với tư vấn viên.
Hiển thị danh sách các thông báo gần đây.
List view các vấn đề thường gặp
Khi nút xem thêm được chọn ➔
Hiển thị mở rộng danh sách các vấn đề thường gặp.
Hiển thị các đơn nhận nuôi đã gửi, tình trạng duyệt đơn và chi tiết đăng ký của đơn.
Nút gọi điện hỗ trợ
Thực hiện cuộc gọi tới tư vấn viên.
Nút chat trực tuyến với tư vấn viên
Chuyển tới màn hình chat để được nhắn tin trực tiếp với tư vấn viên.
Hình 4-27 User flow màn hình Hỗ trợ
3.3.6 User Flow màn hình Tài khoản
Người dùng sẽ bắt đầu tại màn hình Account Screen Gồm có các chức năng như nút thông báo; Quản lý thẻ và tài khoản; Lịch sử giao dịch.
Hiển thị danh sách các thông báo gần đây.
Quản lý thẻ và tài khoản
Khi nút thêm ngân hàng nội địa và quốc tế được chọn ➔
Chuyển tới màn hình chọn ngân hàng/thẻ ➔
Chuyển tới màn hình xác nhận thông tin tài khoản ngân hàng ➔
Hiện thông báo kết quả trả về từ hệ thống.
Khi một giao dịch được chọn ➔
Hiển thị chi tiết về giao dịch đó Đồng thời có nút hỗ trợ để giải quyết sự cố về giao dịch.
Hình 4-28 User flow màn hình Tài khoản
Thiết kế UI guideline
Guideline là các hướng dẫn, nguyên tắc để thực hiện theo đúng tiêu chuẩn và định hướng chung.
Trong thiết kế giao diện người dùng (UI), việc tuân thủ các định luật và hướng dẫn thiết kế là điều cần thiết để đảm bảo trải nghiệm nhất quán và chuẩn mực cho toàn bộ sản phẩm.
Các guideline UI giải thích về thành phần UI và hiểu rõ hành vi của người dùng bằng cách đưa ra các mẫu ví dụ thực tiễn Những guideline này thường được định nghĩa ở cấp độ tổ chức và cực kỳ hữu ích cho các nhà thiết kế, lập trình viên và người thử nghiệm
“Guideline là một ngôn ngữ trực quan để truyền thông các mục tiêu thiết kế trong nhóm, điều quan trọng là đảm bảo mọi người đều có thể hiểu và thực hiện việc sử dụng nó ”- Yuki Gu
UI guideline rất hữu ích cho các công ty cũng như các cá nhân để tạo sản phẩm.
4.2 Tại sao UI guideline quan trọng?
Lý do để UI guideline quan trọng trong quy trình thiết kế là:
• Chúng giúp trải nghiệm nhất quán trong toàn bộ sản phẩm, dự án;
• Ngoài thông số kỹ thuật của các thành phần UI, guideline cũng mô tả các giải pháp hay nhất Nó giúp người đọc dễ dàng đưa ra quyết định đúng đắn;
• Chúng giúp việc nghiên cứu, thảo luận dễ dàng hơn;
• Nhà thiết kế không phải tạo thông số kỹ thuật mỗi khi họ thiết kế một đối tượng đặc biệt;
• Các lập trình viên không mất thời gian vào thông số kỹ thuật của
UI, họ có thể tham khảo các guideline và bộ xây dựng giao diện được chuẩn bị trước đó;
• Thuận tiện trong việc cập nhật các guideline dựa trên tiêu chuẩn và xu hướng mới, giúp thiết kế của sản phẩm bắt kịp xu hướng.
Do đó, để thiết kế các sản phẩm có một trải nghiệm gắn kết và nhất quán, thì việc chuẩn bị một bộ guideline là cần thiết.
Dựa trên cách sử dụng, guideline có thể được phân loại như sau:
Các style (kiểu) của guideline xác định hình thức thị giác của một dự án mà nó trình bày Mỗi dự án đều có kiểu guideline riêng được sử dụng để xây dựng logo, màu sắc, icon và typography.
Layout của guideline nhằm xác định cấu trúc tổng thể của giao diện UI có thể được thiết kế bằng layout lưới hoặc layout danh sách.
Những guideline này cung cấp thông số kỹ thuật và cách sử dụng các thành phần UI hiển thị trên giao diện và tương tác của người dùng với chúng.
Các thành phần UI bao gồm như cửa sổ, hộp thoại, bảng, menu, chế độ xem, thanh cuộn, nút và nhiều mục tương tự khác.
Hướng dẫn văn bản xác định tông điệu và cách thức viết cho văn bản trên giao diện người dùng Văn bản cần dễ hiểu đối với nhiều nền văn hóa và đối tượng người đọc khác nhau.
Thông số của văn bản như kích thước font chữ, màu sắc và style là một phần của guideline này Văn bản hiển thị trên UI dưới dạng trường, nhãn, thư và thông tin cho người dùng.
Tương tác và hành vi
Các loại tương tác (nhấp chuột, cử chỉ, giọng nói) mà người dùng thực hiện với thành phần thiết kế, và phản hồi của hệ thống từ các tương tác đều thuộc trong guideline này.
Các nền tảng của phần mềm và ứng dụng để phát triển như mobile, thiết bị đeo được, ô tô tự động,… Guideline UI này bao gồm chi tiết về tất cả các loại nền tảng và độ phân giải được hỗ trợ.
Việc thiết kế một hệ thống có thể dễ dàng truy cập cần một bộ guideline cho những người dùng bị khuyết tật, để họ có thể sử dụng sản phẩm như một người dùng bình thường.
4.4 Thiết kế UI guideline cho AdoptKids
Hình 4-29 Phông chữ và màu sắc
4.4.1 Font chữ Ở đây tôi chọn bộ font chữ Roboto Roboto là bộ phông chữ không chân (sans-serif) loại neo-grotesque phát triển bởi Google để trở thành phông chữ hệ thống cho hệ điều hành Android.
Hình 4-30 Font chữ Roboto - Google
Google miêu tả đây là một phông chữ "hiện đại, dễ dàng tiếp cận" và
"giàu xúc cảm" Bộ phông này bao gồm sáu kiểu in đậm (weight) theo mức độ đậm dần là Thin, Light, Regular, Medium, Bold và Black cùng với kiểu dáng in xiên (oblique style) kèm theo Roboto cũng bao gồm kiểu dáng in đặc (condensed style) theo ba mức độ in đậm là Light, Regular và Bold, tất nhiên là cũng kèm theo kiểu dáng in xiên.
Roboto hỗ trợ những ký tự Latin, Hy Lạp (một phần) và Kirin Nhờ sự đa dạng, hiện đại và dễ dàng tiếp cận của bộ font này, tôi thấy sự phù hợp trong lối thiết kế của ứng dụng AdoptKids và mục tiêu mà nó hướng tới là những ai với mong muốn tạo một tổ ấm đầy tình thương.
Hình 4-31 Font chữ Roboto – Google
Màu sắc đóng vai trò quan trọng trong thiết kế và cuộc sống Nó có thể thu hút ánh mắt của người xem, khơi dậy một xúc cảm, thậm chí là truyền đi những điều quan trọng mà không cần dùng đến từ ngữ.
Thiết kế UI - Mockup
Sau quá trình thiết kế wireframe; UI guideline, tôi tiến hành bước mockup giúp bản thiết kế hoàn thiện hơn.
Hình 4-43 UI màn hình Tổng quan
Hình 4-44 UI màn hình nhận nuôi
Hình 4-45 UI màn hình Thông báo và Blog\
Hình 4-46 UI màn hình Thông tin nhận nuôi
Hình 4-47 UI màn hình Đăng ký nhận nuôi
Hình 4-48 UI màn hình Yêu thích và Tìm kiếm
Hình 4-49 UI màn hình Quyên góp và Thông tin quyên góp
Hình 4-50 UI màn hình Thanh toán
Hình 4-51 UI màn hình Splash screen Quyên góp
Hình 4-52 UI màn hình Hỗ trợ
Hình 4-53 UI màn hình thông tin đơn nhận nuôi
Hình 4-54 UI màn hình Giải đáp vấn đề và Chat tư vấn
Hình 4-55 UI màn hình Tài khoản và Quản lý thẻ
Hình 4-56 UI màn hình Chi tiết giao dịch
