TƯƠNG TÁC NGƯỜI MÁY Xây Dựng Web-App Telegram

lOMoARcPSD|11379211 ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG TƯƠNG TÁC NGƯỜI MÁY Xây Dựng Web-App Telegram Sinh viên thực :MAI XUÂN THƯỞNG Sinh viên thực :NGUYỄN ĐẶNG KHUÊ VĂN Sinh viên thực :PHẠM VIỆT SỸ Lớp :18IT3 Giảng viên hướng dẫn :ThS ĐẠI Đà nẵng, ngày 20 tháng năm 2020 lOMoARcPSD|11379211 LỜI CẢM ƠN Trước tiên với tình cảm sâu sắc chân thành nhất, cho phép em bày tỏ lòng biết ơn đến tất cá nhân tổ chức tạo điều kiện hỗ trợ, giúp đỡ em suốt trình học tập nghiên cứu đề tài Trong suốt thời gian từ bắt đầu học tập trường đến nay, em nhận nhiều quan tâm, giúp đỡ q Thầy Cơ bạn bè Với lịng biết ơn sâu sắc nhất, em xin gửi đến quý Thầy Cô Khoa CNTT & Truyền Thông truyền đạt vốn kiến thức quý báu cho chúng em suốt thời gian học tập trường Nhờ có lời hướng dẫn, dạy bảo thầy cô nên đề tài nghiên cứu em hồn thiện tốt đẹp Một lần nữa, em xin chân thành cảm ơn thầy – người trực tiếp giúp đỡ, quan tâm, hướng dẫn em hoàn thành tốt báo cáo thời gian qua Bài báo cáo thực tập thực khoảng thời gian gần tuần Bước đầu vào thực tế em hạn chế cịn nhiều bỡ ngỡ nên khơng tránh khỏi thiếu sót , em mong nhận ý kiến đóng góp q báu q Thầy Cơ để kiến thức em lĩnh vực hồn thiện đồng thời có điều kiện bổ sung, nâng cao ý thức Em xin chân thành cảm ơn! lOMoARcPSD|11379211 NHẬN XÉT (Của giáo viên hướng dẫn) ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ……… Đà nẵng, ngày … tháng … năm … Giảng viên hướng dẫn lOMoARcPSD|11379211 MỤC LỤC MỤC LỤC CÁC HÌNH MỞ ĐẦU Lý Do Chọn Đề Tài Dự Kiến Kết Quả 5 CHƯƠNG TÌM HIỂU VỀ UX DESIGN VÀ UI DESIGN Những hiểu biết UX thiết kế UX UX: UX đời sống hàng ngày 2.1 UX đời sống hàng ngày 2.2 Thế UX tốt ? 2.3 Vai trò UX tới doanh nghiệp Khái niệm UX Design UI Design: Cơng việc UX Designer UI Designerlà ? Giữa UX UI quan trọng ? Quá trình thiết kế dự án UX/UI 6 7 9 10 12 13 14 CHƯƠNG 2: TÌM HIỂU MỘT SỐ CƠNG CỤ THỰC HÀNH Bút, tẩy giấy Miro – Công cụ hỗ trợ vẽ sơ đồ Figma – Công cụ hỗ trợ việc thiết kế UI 15 15 16 17 lOMoARcPSD|11379211 MỞ ĐẦU Trong cách mạng công nghệ 4.0 ngày nay, Việt Nam dần cố gắng nắm bắt hội để dần chuyển thành nước phát triển Phát triển mạnh nhiều lĩnh vực, tập trung chủ yếu vào lĩnh vực Công Nghệ Thơng Tin, Bưu Chính - Viễn Thơng,…Dựa vào đó, cạnh tranh doanh nghiệp không nằm lĩnh vực, thị trường mà doanh nghiệp hoạt động Giờ đây, cịn cạnh tranh tảng số, tảng Công Nghệ Thông Tin Mọi doanh nghiệp cần có website, ứng dụng điện thoại nhằm giới thiệu riêng cho doanh nghiệp mình, nơi thể cá tính sắc riêng doanh nghiệp Với đặc thù riêng doanh nghiệp lĩnh vực Kinh doanh, cịn nơi bày bán, giới thiệu sản phẩm doanh nghiệp tới khách hàng mình, đồng thời thu hút thêm nhiều khách hàng Việc bày bàn sản phẩm không diễn cửa hàng truyền thống mà website, ứng dụng điện thoại Foam Market – Một doanh nghiệp cung ứng sản phẩm nơng thực phẩm doanh nghiệp họ sản xuất Khơng đứng ngồi chơi đó, Foam cần có ứng dụng để kết nối với khách hàng mở rộng thị phần Quá trình thực đề tài chia làm phần: Phần 1: Phân tích, nghiên cứu vấn đề, trải nghiệm người dùng ứng dụng Foam Market (UX Design) Phần 2: Thiết kế giao diện cho ứng dụng Foam Market (UI Design) Lý Do Chọn Đề Tài Khi bạn nghĩ đến ứng dụng nhắn tin, tên xuất đầu bạn có lẽ Zalo, Facebook Messenger, Skype WhatsApp Điều dễ hiểu ứng dụng nhắn tin phổ biến Việt Nam Tuy nhiên, bạn lo ngại vấn đề bảo mật sử dụng ứng dụng nhắn tin, Telegram lựa chọn tốt Vì chúng tơi lên ý tưởng muốn phát triển chúng thành ứng dụng đa tảng để tất người dễ dàng kết nối với Dự Kiến Kết Quả Dự kiến sau nghiên cứu phát triển đề tài, phát triển ứng dụng trang web thiết kế thành sản phẩm thực tế sử dụng lOMoARcPSD|11379211 CHƯƠNG TÌM HIỂU VỀ UX DESIGN VÀ UI DESIGN Những hiểu biết UX thiết kế UX UX: Được viết đầy đủ User Experience (Trải nghiệm người dùng) Là trải nghiệm người dùng người dùng sử dụng sản phẩm hay dịch vụ Steve Jobs – nhà thiết kế, doanh nhân người Mỹ, người đồng sáng lập, Cựu Chủ tịch giám đốc điều hành Apple Inc Một nhân vật tiếng việc muốn đưa trải nghiệm tốt cho người dùng Hình 1.1 Chân dung Steve Jobs Ơng nhân chứng hồn hảo cho việc áp dụng UX ứng dụng phát phát triển sản phẩm Tìm hiểu qua vài câu nói ông: “ You have to start with the customer experience and work backwards to the technology – Bạn bắt đầu với trải nghiệm người dùng sau đến yếu tố công nghệ ” – Steve Jobs lOMoARcPSD|11379211 Vào thời điểm ơng nói câu này, việc phát triển sản phẩm yếu tố cơng nghệ yếu tố kiên Còn với phát triển công nghệ mạnh mẽ ngày nay, nhiều platform đời nhằm giúp việc phát triển sản phẩm trở nên dễ dàng Và vai trò UX ngày hữu cách rõ ràng Từ ta dễ dàng nhận tầm nhìn trước thời đại ơng Với tầm nhìn trước thời đại ông, ông người tiên phong cơng cách mạng thay đổi máy vi tính điện thoại di động thơng minh, đóng góp khơng nhỏ vào thành công Apple hôm Hiện nay, Apple trở thành công ty tỷ đô, với móng di sản Steve Jobs xây dựng “ Design is not just what it looks and feels like Design is how it works - Thiết kế không trơng giống cảm thấy Thiết kế cách hoạt động.” -Steve Jobs Steve Jobs ln đặt tính năng, giá trị sản phẩm đem lại cho người dùng điều quan trọng nhất, giao diện, bao bì, tính thẩm mỹ sản phẩm Một người có ảnh hưởng lớn Steve Jobs ln ln đề cao tính trải nghiệm sản phẩm (UX) hẵn đóng vai trị quan trọng trình phát triển sản phẩm Hình 1.2 Câu nói tiếng Steve Jobs lOMoARcPSD|11379211 UX đời sống hàng ngày 2.1 UX đời sống hàng ngày Con người thường xuyên có trải nghiệm với đối tượng mà ta tiếp xúc ngày (Có thể sản phẩm, dịch vụ người kỳ) Đó trải nghiệm tốt, trải nghiệm xấu Và ta thường xuyên tìm kiếm trải nghiệm tốt thay trải nghiệm xấu Trải nghiệm thứ thúc đẩy người dùng chi tiêu sử dụng sản phẩm, dịch vụ Đơi trải nghiệm lạ mà người dùng làm điên rồ Tuy nhiên có trải nghiệm người ta muốn trải nghiệm mãi, có trải nghiệm hiếu kỳ lần đời Có trải nghiệm họ ko muốn lặp lại trải nghiệm lần Hình 1.3 Ví dụ trải nghiệm UX xấu Ví dụ 1: Hẳn có trải nghiệm khó khăn bãi gửi xe Khi việc ghi số, đánh dấu xe viên phấn ghi trực tiếp yên xe, khiến cho ta có nhìn khơng thiện cảm với vết phấn cịn xót lại ta rời bãi đỗ xe Phải khoảng vài ngày, chí tuần vết phấn mờ dần biến => Một trải nghiệm UX xấu lOMoARcPSD|11379211 Hình 1.4 Ví dụ trải nghiệm UX tốt Ví dụ 2: Nhưng nhiều bãi đỗ xe, họ cải thiện cách áp dụng công nghệ, sử dụng thẻ từ để ghi số, đánh dấu xe Khiến cho việc gửi xe dễ dàng hơn, khách hàng khơng cịn gặp tình trạng “vết phấn”, doanh nghiệp giảm tải ùn tắc trình ghi số => Một trải nghiệm UX tốt 2.2 Thế UX tốt ? Đối với sản phẩm coi UX tốt cần phải đảm bảo yếu tố sau đây: ● Findable: Người dùng tìm thấy sản phẩm ? Và sản phẩm có phải thứ họ cần tìm hay khơng ? ● Acessible: Người dùng có đủ điều kiện để sử dụng sản phẩm hay khơng ? ● Usable: Sản phẩm dàng sử dụng hay không ? ● Desirable: Sự lôi cuốn, thúc đẩy sản phẩm ? ● Credible: Độ tin cậy sản phẩm người dùng ? lOMoARcPSD|11379211 ● Usefull: Độ hữu dụng sản phẩm ? Hình 1.5 Mơ hình bậc thang bước 2.3 Vai trò UX tới doanh nghiệp Ngày ngày có nhiều cơng ty - hiểu vấn đề cốt lõi trình phát triển sản phẩm Đó là: Thời kỳ việc sản xuất đại trà qua thời kỳ cạnh tranh chất lượng sản phẩm qua Thực tế thời đại này, người dùng có q nhiều lựa chọn sản phẩm Bất sản phẩm vừa đc phát minh ra, dù có tinh vi, phức tạp đến đâu, sau thời gian ngắn bắt chước để tạo sản phẩm tương đương Nhưng trải nghiệm mà sản phẩm tạo cho khách hàng Các nhận dạng từ hình ảnh, ngơn từ, cách tương tác, cảm xúc sáng tạo sản phẩm riêng doanh nghiệp người khác khó lịng copy Do nói UX ngày thể rõ vai trị yếu tố cạnh tranh định doanh nghiệp lOMoARcPSD|11379211 lOMoARcPSD|11379211 2.2 Listing lOMoARcPSD|11379211 2.3 Single-Listing lOMoARcPSD|11379211 lOMoARcPSD|11379211 lOMoARcPSD|11379211 lOMoARcPSD|11379211 2.4 Candidate-Listing lOMoARcPSD|11379211 2.5 Candidate-Profile lOMoARcPSD|11379211 2.6 Job Description lOMoARcPSD|11379211 lOMoARcPSD|11379211 2.7 404 Page lOMoARcPSD|11379211 2.8 Add Post lOMoARcPSD|11379211 2.8 Login page lOMoARcPSD|11379211 2.9 About Us 2.10 Register lOMoARcPSD|11379211