Nghiên cứu xây dụng sản phẩm mẫu và thiết kế giao diện người dùng cho ứng dụng di động

BỘ GIÁO DỤC VÀ ĐÀO TẠO ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KHOA TIN HỌC Đề Tài: NGHIÊN CỨU XÂY DỰNG SẢN PHẨM MẪU VÀ THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG CHO ỨNG DỤNG DI ĐỘNG Giảng viên hướng dẫn : Sinh viên thực : Lớp : Niên khóa : Nguyễn Thanh Tuấn Nguyễn Diễm Thanh 10CNTT3 2010 - 2014 Đà Nẵng – 2014 Luận Văn Tốt Nghiệp LỜI CAM ĐOAN Tôi xin cam đoan cơng trình nghiên cứu thân Các nội dung nghiên cứu kết đề tài trung thực chưa công bố cơng trình nghiên cứu trước Sản phẩm trình nghiên cứu nằm phần dự án tham gia công ty QGS Việt Nam đồng ý công ty sử dụng Sinh viên thực Nguyễn Diễm Thanh SVTT: Nguyễn Diễm Thanh Luận Văn Tốt Nghiệp LỜI CẢM ƠN Sau thời gian dài lựa chọn đề tài, nghiên cứu, tổng hợp viết báo cáo vấn đề xây dựng sản phẩm mẫu thiết kế giao diện ứng dụng tơi hồn thành luận văn nghiên cứu Tơi xin chân thành cảm ơn Khoa Tin Học, trường Đại Học Sư Phạm Đà Nẵng tạo điều kiện cho thực đề tài luận văn tốt nghiệp Xin cảm ơn Thầy Nguyễn Thanh Tuấn, người tận tình hướng dẫn, bảo suốt thời gian thực đề tài Trong thời gian làm việc với Thầy, học hỏi nhiều kiến thức bổ ích mà học tinh thần làm việc, thái độ nghiên cứu khoa học nghiêm túc Thầy Xin gửi lời cảm ơn chân thành đến gia đình, ba mẹ bè bạn ln nguồn động viên to lớn, giúp đỡ tơi vượt qua khó khăn suốt trình làm việc Mặc dù cố gắng hoàn thiện luận văn với tất nỗ lực thân, chắn tránh khỏi thiếu sót Kính mong q Thầy Cơ tận tình bảo Một lần nữa, xin chân thành cảm ơn ln mong nhận đóng góp q báu tất người Đà Nẵng, tháng 5/2014 Nguyễn Diễm Thanh SVTT: Nguyễn Diễm Thanh Luận Văn Tốt Nghiệp MỤC LỤC LỜI CÁM ƠN DANH MỤC HÌNH DANH MỤC BẢNG BIỂU MỞ ĐẦU Đặt vấn đề A a Lời mở đầu b Mục tiêu c Phạm vi nghiên cứu B Ý nghĩa khoa học thực tiễn C Phương pháp nghiên cứu D Bố cục luận văn Chƣơng TỔNG QUAN 1.1 Khái niệm ứng dụng di động 1.2 Quá trình phát triển ứng dụng di động 1.2.1 Ứng dụng di động trước 1.2.1 Ứng dụng di động 1.2.2 Ứng dụng di động tương lai 1.2.3 Sự tăng trưởng thị trường điện thoại di động 1.3 Các vấn đề phát triển ứng dụng di động 1.4 Agile 1.4.1 Agile gì? 1.4.2 Tại phát triển ứng dụng theo hướng Agile hợp lý? 1.4.3 Các giá trị áp dụng phương pháp Agile vào phát triển dự án Kết chương 10 1.5 Chƣơng XÂY DỰNG SẢN PHẨM MẪU VÀ THIẾT KẾ GIAO DIỆN CHO ỨNG DỤNG DI ĐỘNG 11 Xây dựng sản phẩm mẫu cho ứng dụng di động 11 2.1 2.1.1 Sản phẩm mẫu 11 a Sản phẩm mẫu 11 b Tại cần xây dựng sản phẩm mẫu? 11 c Tiêu chuẩn đánh giá sản phẩm mẫu 11 d Độ trung thực sản phẩm mẫu 11 SVTT: Nguyễn Diễm Thanh Trang i Luận Văn Tốt Nghiệp e Phân loại 12 f Kỹ thuật xây dựng sản phẩm mẫu máy công cụ hỗ trợ 12 2.1.2 Quy trình xây dựng sản phẩm mẫu 14 a Quá trình nghiên cứu 14 b Xây dựng sơ đồ Mindmap 15 c Xây dựng User Story 15 d Xây dựng sản phẩm mẫu 15 e Xác định luồng liệu 15 f PRD 15 2.1.3 Các công cụ hỗ trợ xây dựng sản phẩm mẫu 16 a Mindject MindManager 16 b Axure 16 c Draw.io 17 Thiết kế giao diện người dùng cho ứng dụng di động 17 2.2 2.2.1 Giao diện người dùng 17 2.2.2 Các xu hướng xây dựng giao diện người dùng qua thời kỳ 17 2.2.3 Quy trình thiết kế giao diện người dùng 19 a Xác định người dùng ngữ cảnh sử dụng sản phẩm 20 b Thiết kế cấu trúc định hướng giao diện 20 c Thiết kế bố cục giao diện 21 d Thiết kế giao diện trực quan 21 e Chuyển giao diện trực quan vào mẫu thử nghiệm sản phẩm 21 f Kiểm tra khả sử dụng mẫu thử nghiệm 21 g Đặc tả giao diện 22 2.2.4 Các mẫu thiết kế cho ứng dụng di động 22 a) Navigation (Thanh điều hướng) 22 b) Forms (Các dạng cửa sổ ) 23 c) Search, Sort & Filter (Tìm kiếm, phân loại lọc) 23 d) Tools (Công cụ) 23 e) Invitation (Lời mời) 23 f) Feedback & Affordance (Phản hồi tương tác) 23 2.2.5 Các công cụ hỗ trợ thiết kế giao diện người dùng 24 a Giấy bút 24 b Lựa chọn màu sắc với dribbble.com 24 c Adobe Photoshop 25 2.3 Kết chương 25 SVTT: Nguyễn Diễm Thanh Trang ii Luận Văn Tốt Nghiệp Chƣơng XÂY DỰNG SẢN PHẨM MẪU VÀ THIẾT KẾ GIAO DIỆN NGƢỜI DÙNG CHO DỰ ÁN TAXI HOPPER .26 3.1 Giới thiệu dự án Taxi Hopper 26 3.1.1 Dự án Taxi Hopper 26 a Taxi Hopper gì? 26 b QUp Taxi 27 c QUp Taxi Touch 27 d QUp Dispatching System 27 3.1.2 Các chức Taxi Hopper 27 3.2 Xây dựng sản phẩm mẫu cho dự án Taxi Hopper 27 3.2.1 Nghiên cứu thị trường 27 a Yellow Cab Seattle 28 b Ping Taxi 28 c Uber 28 d Kết trình nghiên cứu 29 3.2.2 Xây dựng Mind map 30 3.2.3 Xây dựng User Story 31 3.2.4 Xây dựng sản phẩm mẫu 32 3.2.5 Xác định luồng liệu ứng dụng 34 Thiết kế giao diện người dùng cho dự án Taxi Hopper 37 3.3 3.3.1 Giao diện Qup Taxi Touch 37 3.3.2 Giao diện Qup Taxi 39 Kết chương 39 3.4 KẾT LUẬN PHỤ LỤC .1 Phụ Lục Mô tả thêm ứng dụng tương tự qua hình ảnh ứng dụng thực a Yellow Cab Seattle b Ping Taxi c Uber Phụ Lục Sơ đồ Mindmap chi tiết ứng dụng Qup Taxi Qup Taxi Touch a QUP Taxi b QUP Taxi Touch Phụ Lục User story ứng dụng Qup Taxi Qup Taxi Touch 10 Phụ Lục Các thành phần thiết kế giao diện ứng dụng di động 11 a Navigation 11 b Forms 14 SVTT: Nguyễn Diễm Thanh Trang iii Luận Văn Tốt Nghiệp c Search, Sort & Filter 16 d Tools 19 e Invitation 21 f Feedback & Affordance 24 g Các lỗi thường gặp nên tránh 26 SVTT: Nguyễn Diễm Thanh Trang iv Luận Văn Tốt Nghiệp DANH MỤC HÌNH Hình Quy trình triển ứng dụng Hình Các ứng dụng di động Hình Các ứng dụng di động tương lai Hình Sự tăng trưởng thị trường di động từ 1940 – 2011 Hình Lịch sử phát triển điện thoại thông minh từ 1993 - 2011 Hình Sản phẩm mẫu xây dựng kỹ thuât Story board 13 Hình Xây dựng sản phẩm mẫu sử dụng kỹ thuật Form builder 13 Hình Quy trình xây dựng sản phẩm mẫu ứng dụng di động 14 Hình Axure - Công cụ xây dựng sản phẩm mẫu 16 Hình 10 Draw.io - Công cụ vẽ sơ đồ trực tuyến 17 Hình 11 Quy trình thiết kế giao diện lấy người dùng làm trung tâm 20 Hình 12 Quy trình thiết kế giao diện người dùng theo chuẩn ISO-13.407 21 Hình 13 Cơng cụ thiết kế 24 Hình 14 dribbble.com - công cụ lựa chọn màu sắc 24 Hình 15 Adobe Photoshop - công cụ thiết kế giao diện 25 Hình 16 Giải pháp cho ngành công nghiệp Taxi dự án Taxi Hopper 26 Hình 17 Ba sản phẩm dự án Taxi Hopper 26 Hình 18 Sơ đồ Mindmap tổng quan dự án Taxi Hopper 31 Hình 19: Một số giao diện sản phẩm mẫu dành cho iPhone QUp Taxi 32 Hình 20: Một số giao diện sản phẩm mẫu dành cho Samsung Galaxy S3 QUp Taxi 33 Hình 21 Một số giao diện sản phẩm mẫu dành cho Samsung Galaxy S3 QUp Taxi Touch 34 Hình 22 Sơ đồ luồng liệu QUp Taxi 35 Hình 23 Luồng liệu QUp Taxi Touch 36 Hình 24 Một số giao diện sau thiết kế QUp Taxi Touch 39 SVTT: Nguyễn Diễm Thanh Trang v Luận Văn Tốt Nghiệp DANH MỤC BẢNG BIỂU Bảng Mô tả ứng dụng hình ảnh minh họa Bảng Phân loại so sánh sản phẩm mẫu 12 Bảng So sánh hai kỹ thuật xây dựng sản phẩm mẫu máy tính 13 Bảng Giới thiệu mơ tả kèm hình ảnh minh họa xu hướng xây dựng giao diện người dùng qua thời kỳ 19 Bảng Bảng chức QUp Taxi 29 Bảng Bảng chức QUp Taxi Touch 30 SVTT: Nguyễn Diễm Thanh Trang vi Luận Văn Tốt Nghiệp MỞ ĐẦU A Đặt vấn đề a Lời mở đầu Trong thời đại với tiến vượt bậc công nghệ, điện thoại thông minh gây nên sốt toàn cầu Hiện nay, số lượng người dùng sử dụng điện thoại thông minh tăng trưởng với tốc độ cao Đó hội thách thức lớn vịng đời cơng nghệ ngày ngắn dần, thay đổi liên tục diễn nhanh mà có bạn cho đời sản phẩm cơng nghệ hồn chỉnh trở nên lỗi thời sau Giải pháp cho vấn đề thời gian giải cách sử dụng Phương thức phát triển phần mềm linh hoạt Agile1 Tức luôn cho sản phẩm thị trường thời gian ngắn dù có chưa hồn thiện Để tạo sản phẩm phần mềm ln ln địi hỏi thay đổi việc tạo sản phẩm mẫu cho ứng dụng thực cần thiết Vì vậy, việc thiết kế giao diện người dùng trở nên quan trọng Nhưng thiết kế giao diện tốt cho hệ thống thông tin khơng phải việc làm dễ dàng Để thiết kế giao diện tốt, tăng tính sử dụng, đáp ứng nhu cầu khách hàng mà không làm lãng phí tài ngun cơng ty u cầu người thiết kế phải có đủ kinh nghiệm, tri thức kết có từ trước Do đó, sau có thời gian làm việc thực tế vị trí BA (Bussiness Analyst) – vị trí hình thành sản phẩm cơng ty vị trí thiết kế ứng dụng (Designer) tơi hiểu thực tế công ty phần mềm tạo sản phẩm theo cách để phục vụ tốt nhu cầu tầm quan trọng việc hình thành sản phẩm mẫu tồn quy trình xây dựng ứng dụng, chọn làm luận văn với đề tài “NGHIÊN CỨU XÂY DỰNG SẢN PHẨM MẪU VÀ THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG CHO ỨNG DỤNG DI ĐỘNG” nhằm nghiên cứu sâu quy trình hình thành sản phẩm mẫu quy trình thiết kế ứng dụng b Mục tiêu Đề tài nghiên cứu trình hình thành sản phẩm mẫu thiết kế ứng dụng di động bước ứng dụng để tạo nên sản phẩm mẫu, hiểu thành phần giao diện ứng dụng di động để từ ứng dụng kết hợp nội dung cần truyền tải qua ứng dụng tảng ứng dụng mà định phát triển, tránh thời gian việc chạy theo công nghệ điều dễ thay đổi dẫn đến sai lầm đáng tiếc giao diện ứng dụng không quán, không tuân Agile Software Development SVTT: Nguyễn Diễm Thanh Trang Luận Văn Tốt Nghiệp b Forms Mô tả Tên Sign in Hình minh họa Đừng thay đổi cấu trúc chung hình đăng nhập nhiều Cung cấp cho người dùng cách để lấy lại mật Nên thêm cách đăng nhập thông qua mạng xã hội Registration Làm ngắn gọn, tốt hình Hãy người dùng nhìn thấy nút đăng ký Comments Mời người dùng để lại bình luận Ln trình bày rõ ràng cảm nhận Hiển thị bình luận trước Nguyễn Diễm Thanh Trang 14 Luận Văn Tốt Nghiệp Users profile Share Empty Datasets Nên thiết kế có huy hiệu hay cấp bậc để thể đóng góp người dùng mạng xã hội sản phẩm Cung cấp thêm điều khiển nhanh Luôn theo dõi mail hay mạng xã hội đăng nhập Luôn cho phép chia sẻ phương thức Thêm ý kiến, nhận xét điều muốn chia sẻ Tránh để hình trắng, giải thích lý khơng có liệu Cho phép khách hàng phản hồi, gọi điện Tránh để thông báo lỗi Nguyễn Diễm Thanh Trang 15 Luận Văn Tốt Nghiệp Settings Đặt ứng dụng Chia thành nhóm, trình bày rõ ràng Dễ hiểu c Search, Sort & Filter Tên Mơ tả Explicit Search (Tìm kiếm rõ ràng) Dành nút, rõ ràng để tìm kiếm Cho người dùng tùy chọn để hủy việc tìm kiếm Dùng phản hồi để hiển thị tìm kiếm thực Search autocomplete Hình minh họa Nên có phản hồi có chậm trễ việc hiển thị kết Gợi ý tìm kiếm phù hợp hay tương tự Nguyễn Diễm Thanh Trang 16 Luận Văn Tốt Nghiệp Dynamic Search (Tìm kiếm chủ động) Scoped Search (Tìm kiếm theo phạm vi) Tự động lọc danh sách đối tượng thường dùng đánh giá cao Thường sử dụng tìm kiếm danh bạ, ứng dụng… Phạm vi liệu cung cấp lợp lý dựa liệu có sẵn Chỉ nên có từ đến tùy chọn để xác định phạm vi Search Form (Tìm theo mẫu có sẵn) Giảm thiểu số lượng thông tin đầu vào Thực hành thiết kế theo mẫu đánh giá tốt (về canh dịng, lables, kích thước) Chỉ sử dụng thực cần thiết Search Results Nên hiển thị trực tiếp trang cuộn xuống để xem phân nhiều trang Nên áp dụng thứ tự xếp mặc định hợp lý Bổ sung hành động cân kêu gọi kèm theo kết (nếu cần) Nguyễn Diễm Thanh Trang 17 Luận Văn Tốt Nghiệp Onscreen Sort Sort Order Selector Filter Forms (Mẫu lọc) Các tùy chọn để xếp hiển thị rõ hình Khơng sử dụng cách tên tùy chọn không khớp Dựa vào quy ước thiết kế hệ điều hành để chọn điều khiển tùy chọn Tùy chọn áp dụng hiển thị vị trí hợp lý Đừng thiết kế mức, lọc đơn giản chia ngăn đủ Nguyễn Diễm Thanh Trang 18 Luận Văn Tốt Nghiệp d Tools Mơ tả Tên Toolbar Option Menu Contextual Tools Hình minh họa Chứa hành động theo cấp bậc thường hiển thị đáy hình Lựa chọn biểu tượng dễ dàng nhận tác dụng, chức đính kèm nhãn cần thiết Chọn tương tác trực tiếp Khơng nên giấu điều hướng trình đơn tùy chọn Đối với nút cần thiết, nên để hiển thị gần đối tượng hành động Chọn biểu tượng quen thuộc, dễ hiểu thêm nhãn để làm rõ nghĩa Nguyễn Diễm Thanh Trang 19 Luận Văn Tốt Nghiệp Inline Actions Call to Action Buttons Multi-state Button Bulk Actions Tối đa đến hành động nội tuyến đối tượng Không ẩn gọi đến hành động menu toolbar với biểu tượng khó nhận biết Nên có tương phản tốt màu sắc chữ hiển thị rõ ràng Nên sử dụng nút đa trạng thái làm việc cho loạt hành động có tương quan chặt chẽ thực liên tiếp Phần lớn hành động xóa, xếp lại, xử lý tốt chế độ chỉnh sửa (edit mode) riêng Nên có lựa chọn rõ ràng cho việc khỏi chế độ Nguyễn Diễm Thanh Trang 20 Luận Văn Tốt Nghiệp Maps Cung cấp đánh dấu phải nhìn thấy, ý đừng để bị che khuất Dùng nhiều hình tốt Nếu khơng phải mục hiển thị nhỏ e Invitation Mô tả Tên Dialog Tip Hình minh họa Nội dung hộp thoại ngắn gọn Nên có hướng dẫn từ bên ứng dụng Vị trí tip gần với tính cần tham khảo Nội dung ngắn gọn, đầy đủ Loại bỏ lời khuyên sau lần tương tác Nguyễn Diễm Thanh Trang 21 Luận Văn Tốt Nghiệp Tour Video Transparency Một hành trình hướng dẫn nên làm bật tính ứng dụng, tốt nên nhìn từ quan điểm người dùng Nên ngắn gọn trực quan lơi người dùng muốn tìm hiểu Video demo giới thiệu nên nói chức cách sử dụng ứng dụng Các tính cần thiết như: dừng hẳn, tạm dừng, điều khiển âm lượng, … phải có Màn hình có độ suốt thấy hình ảnh bên cách mờ mờ Đây giải pháp bù đắp cho việc thiết kế hình Nên loại bỏ độ suốt sau có tương tác Nguyễn Diễm Thanh Trang 22 Luận Văn Tốt Nghiệp 1st Time Through Phân biệt rõ ràng nội dung khác hình ảnh dấu hiệu trực quan khác Persistent Ngắn gọn Phân biệt rõ ràng nội dung khác hình ảnh dấu hiệu trực quan khác Discoverable Dùng lời mời gọi khám phá thích hợp Mơ hình thường sử dụng cho việc nhắc nhở làm liệu Nguyễn Diễm Thanh Trang 23 Luận Văn Tốt Nghiệp f Feedback & Affordance  Feedback Mơ tả Tên Errors Confirmation System Status Hình minh họa Dùng ngôn ngữ đơn giản cung cấp giải pháp để giải vấn đề Chú ý đánh vào cốt lõi Sử dụng dạng tin nhắn thay hộp thoại Cung cấp xác nhận hành động thực Không nên làm gián đoạn luồng liệu người dùng Cung cấp phản hồi tình trạng hệ thống Cung cấp tùy chọn để hủy bỏ thao tác dài Nguyễn Diễm Thanh Trang 24 Luận Văn Tốt Nghiệp  Affordance Mô tả Tên Tap Flick (Kéo nhanh) Drap Hình minh họa Sử dụng thiết kế trực quan để điều khiển nút bấm Áp dụng hiệu ứng 3D cách khôn ngoan Sử dụng số trang Hiển thị phần mục Tránh cuộn nặng Sử dụng biểu tượng dễ nhận biết thay cho thay cầm Xem xét nên đặt thêm lời mời để người dùng biết tính hay khơng Nguyễn Diễm Thanh Trang 25 Luận Văn Tốt Nghiệp g Các lỗi thường gặp nên tránh Mô tả Tên Novel Nortions Metaphor Mismatch Hình minh họa Nếu bạn tìm cách để đổi ứng dụng bạn, tập trung vào tính cốt lõi dịch vụ dựa hoạt động tốt giao diện Nếu bạn thiết kế tùy chỉnh cho người dùng, nên chặt chẽ kiểm tra tinh chỉnh đảm bảo dùng Control mismatch Icon mismatch Mentalmodel mistmatch Nguyễn Diễm Thanh Trang 26 Luận Văn Tốt Nghiệp Chart Junk Idiot Boxes Oceans of Buttons Chỉ sử dụng thành phần trực quan biểu đồ đồ thị thực cần đề truyền tải thông tin thể đồ thị Tránh gián đoạn công việc hộp thông báo ngu ngốc vô lý Chỉ hiển thị hộp xác nhận thực hành động khắc phục sau (xóa vĩnh viễn) Sử dụng mẫu chuẩn đánh giá để hiển thị hoạt động trang có nhiều cấp độ Cung cấp cơng cụ hợp bối cảnh thay sử dụng lặp lại nút Giữa hành động cấp độ trang trực quan yếu tố định hướng rõ ràng Nguyễn Diễm Thanh Trang 27 Luận Văn Tốt Nghiệp XÁC NHẬN CỦA GIẢNG VIÊN PHẢN BIỆN Sau tiếp thu ý kiến giảng viên phản biện, tiến hành chỉnh sửa hoàn thiện báo cáo theo yêu cầu giảng viên phản biện đưa Giảng viên phản biện Thầy Trần Quốc Chiến Nguyễn Diễm Thanh Trang 28 ... xây dựng sản phẩm mẫu thiết kế giao di? ??n người dùng cho ứng dụng di động, đạt kết sau:  Đã xây dựng sản phẩm mẫu cho hai ứng dụng QUp Taxi QUp Taxi Touch  Đã xây dựng giao di? ??n người dùng cho. .. phẩm mẫu thiết kế giao di? ??n ứng dụng SVTT: Nguyễn Di? ??m Thanh Trang 10 Luận Văn Tốt Nghiệp Chƣơng XÂY DỰNG SẢN PHẨM MẪU VÀ THIẾT KẾ GIAO DI? ??N CHO ỨNG DỤNG DI ĐỘNG 2.1 Xây dựng sản phẩm mẫu cho ứng. .. Kết chương 10 1.5 Chƣơng XÂY DỰNG SẢN PHẨM MẪU VÀ THIẾT KẾ GIAO DI? ??N CHO ỨNG DỤNG DI ĐỘNG 11 Xây dựng sản phẩm mẫu cho ứng dụng di động 11 2.1 2.1.1 Sản phẩm