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 ... 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. .. 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 để... 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