Downloaded 22 times
![[Ebook] UI Document - Tú Bùi](https://cdn.slidesharecdn.com/ss_thumbnails/uidocument-150824092212-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
Mobile ui
- 1.
- 2. Mục lục 1. Kháiniệm và quy trình 2. Xu hướng thiết kế UX di động 3. Đánh giá, phát hiện và lập kế hoạch UX 4. Chi tiết cho lên khung trong tạo mẫu giao diện 5. Thiết kế giao diện người dùng trung thực cao 6. Phát triển xây dựng UX
- 3. 1. KHÁI NIỆMVÀ QUY TRÌNH
- 4. KHÁI NIỆM UX làgì? UX (User Experience): trải nghiệm người dùng là những đề cập đến kinh nghiệm của một người có khi sử dụng một sản phẩm. UI là gì? UI (User Interface): giao diện người dùng đề cập đến không gian và phương pháp tạo ra để phục vụ như cầu nối giữa người sử dụng và sản phẩm.
- 5. KHÁI NIỆM Thiết kếgiao diện UI/UX là gì? Đây là một quá trình kết hợp thiết kế giao diện người dùng và những kinh nghiệm từ việc sử dụng trước đó, nên tại sao nói UI và UX là không thể thiếu. Thiết kế UX chủ yếu liên quan đến kinh nghiệm sử dụng tổng thể của sản phẩm và cấu trúc của nó đáp ứng các mục tiêu thiết kế. Thiết kế UI giao diện người dùng rộng lớn hơn và tập trung vào cách sản phẩm được đặt ra thiết kế từng điểm của các giao diện và tất cả chi tiết của nó.
- 6. QUY TRÌNH Quá trìnhthiết kế gồm 4 giai đoạn: Đánh giá, phát hiện và nghiên cứu người dùng (Discovery/Assess ment/User Research) Vẽ khung hình (Wireframing) Thiết kế (Visual Design) Sản xuất và phát triển (Production & Development)
- 7. Một số câuhỏi cần được hỏi và trả lời trong suốt quá trình • UI / UX sẽ làm thế nào đáp ứng những mục tiêu thiết kế? • Mục đích của ứng dụng là gì? • Ứng dụng sẽ làm gì? • Điều gì sẽ có trong ứng dụng? • Sự mong đợi của người sử dụng là gì? • Ứng dụng sẽ làm những gì để người dùng muốn và cần đến nó? • Làm thế nào để chức năng của ứng dụng được thể hiện rõ ràng? • Người sử dụng sẽ làm gì để thúc đẩy tính năng của ứng dụng? • Làm thế nào để các tương tác của ứng dụng được rõ ràng?
- 8. What makes a“Bad UX”? • Cấu trúc điều hướng khó hiểu • Giao diện bố trí gây nhầm lẫn • Quá nhiều lựa chọn • Những tín hiệu khó hiểu hoặc khó phân biệt với thị giác người dùng • Nội dung xấu • Thành phần giao diện bị hỏng, lỗi
- 9. Thiết kế lấyngười dùng là trung tâm Quá trình thiết kế trải nghiệm người dùng dựa trên: • Các tiêu chuẩn trong các ẩn dụ hoặc trung bình mà các ứng dụng sẽ sử dụng • Kiến thức về thương mại của người thiết kế • Có nhiều thực hành trải nghiệm tốt • Nghiên cứu dựa trên kinh nghiệm về thực tiễn sử dụng • Bản năng và đánh giá trực tiếp • Các hình thức nghiên cứu người dùng khác nhau
- 10. Những điều gìlàm nên một UX tuyệt vời • K.I.S.S (Keep it simple, stupid) • Luật của Hick • Luật của Fitts • Conditioning • Proximity (tiệm cận) • The Mental Model • The 80/20 Rule
- 11. Những điều gìlàm nên một UX tuyệt vời • Luật của Hick
- 12. Những điều gìlàm nên một UX tuyệt vời • Luật của Fitts
- 13. Những điều gìlàm nên một UX tuyệt vời • Proximity (tiệm cận)
- 14. Những điều gìlàm nên một UX tuyệt vời • The Mental Model
- 15. Những điều gìlàm nên một UX tuyệt vời • The 80/20 Rule
- 16. 2. XU HƯỚNGTHIẾT KẾ UX DI ĐỘNG Device-Agnostic Designs (Thiết bị và thuyết thiết kế bất khả tri)
- 17. 2. XU HƯỚNGTHIẾT KẾ UX DI ĐỘNG Responsive Design
- 18. 2. XU HƯỚNGTHIẾT KẾ UX DI ĐỘNG Performance Centric Design (Thiết kế lấy hiệu suất là trung tâm)
- 19. 2. XU HƯỚNGTHIẾT KẾ UX DI ĐỘNG Light app
- 20. 2. XU HƯỚNGTHIẾT KẾ UX DI ĐỘNG Live Updating (Cập nhật trực tiếp)
- 21. 2. XU HƯỚNGTHIẾT KẾ UX DI ĐỘNG Cloud Connection and Collaboration (kết nối đám mây và hợp tác)
- 22. 2. XU HƯỚNGTHIẾT KẾ UX DI ĐỘNG Geo-Location Features (tính năng định vị địa lý)
- 23. 2. XU HƯỚNGTHIẾT KẾ UX DI ĐỘNG Leveraged Services and API Employment (Dịch vụ hỗ trợ và phương thức ứng dụng người dùng API)
- 24. 2. XU HƯỚNGTHIẾT KẾ UX DI ĐỘNG Content First and Hidden Menus
- 25. 2. XU HƯỚNGTHIẾT KẾ UX DI ĐỘNG Approaches to Interactions and Content (những cách tiếp cận tương tác và nội dung) Design Patterns Personalization & Customization (cá nhân hóa và tùy biến) Gesture-based interaction (tương tác dựa trên cử chỉ của người dùng)
- 26. 2. XU HƯỚNGTHIẾT KẾ UX DI ĐỘNG Large images & video Modular Design Social Sharing
- 27. 3. ĐÁNH GIÁ,PHÁT HIỆN VÀ LẬP KẾ HOẠCH UX Thiết lập yêu cầu
- 28. 3. ĐÁNH GIÁ,PHÁT HIỆN VÀ LẬP KẾ HOẠCH UX Phỏng vấn khách hàng - Một cuộc phỏng vấn chuyên sâu - Đừng cho rằng khách hàng biết những gì họ cần Cân đối yêu cầu và mục đích mong muốn sử dụng sản phẩm
- 29. 3. ĐÁNH GIÁ,PHÁT HIỆN VÀ LẬP KẾ HOẠCH UX Tạo tài liệu yêu cầu - Mục tiêu của dự án - Mục đích của ứng dụng là gì? - Làm thế nào nó sẽ phục vụ mục đích này? - Nó là gì? - Tóm tắt những gì các ứng dụng sẽ làm
- 30. 3. ĐÁNH GIÁ,PHÁT HIỆN VÀ LẬP KẾ HOẠCH UX Nhận diện thương hiệu - Có một bản sắc thương hiệu hiện tại cho ứng dụng? - Có một vị trí thương hiệu được tạo ra cho nó? - Tập trung vào những gì sẽ đạt được không phải là cách nó sẽ đạt được
- 31. 3. ĐÁNH GIÁ,PHÁT HIỆN VÀ LẬP KẾ HOẠCH UX Yêu cầu chức năng và yêu cầu kỹ thuật - Mục tiêu của dự án - Mục đích của ứng dụng là gì? - Làm thế nào nó sẽ phục vụ mục đích này? - Nó là gì? - Tóm tắt những gì các ứng dụng sẽ làm
- 32.
Editor's Notes
- #8 How will the UI/UX meet these Design Goals? What is the purpose of the app? What will the app do? What will be in the app? What are the user expectations? Will the app do what the user wants and needs it to? How will it be clear what the app does? What will the user do to drive the app’s feature? How will it be clear how to interact with the app
- #9 Confusing navigation structure: Confusing layout: Too many option Confusing or no visual cues Bad content Broken interface element Nếu người dùng bối rối bởi điều hướng và bố trí đó là một dấu hiệu rõ ràng của một thiết kế UX không tốt. Cung cấp cho người sử dụng quá nhiều lựa chọn cũng tạo ra sự nhầm lẫn cho người sử dụng. Những tín hiệu thị giác mô tả các hoạt động của ứng dụng không rõ ràng, làm cho người sử dụng không biết app hoạt động như thế nào Nội dung xấu làm cho người dùng không tim thấy giá trị gì cho việc họ sử dụng ứng dụng Nếu giao diện hiển thị lỗi thông tin đưa đến người dùng bị đứt, gây cảm nhận xấu đối với trải nghiệm người dùng
- #10 the standards within the metaphor or medium knowledge of the trade the many best practices heuristic studies about user practices instinct and direct evaluation user research các tiêu chuẩn trong ẩn dụ hoặc trung bình mà các ứng dụng sẽ được sử dụng kiến thức về thương mại kinh nghiệm của cá nhân người thiết kế và phát triển các giao diện trước đó Nhiều thực hành tốt nhất được viết về một loạt các nghiên cứ dựa trên kinh nghiệm về sử dụng lệ bản năng và trực tiếp đánh giá, nếu chúng ta tìm thấy những thiết kế có thể sử dụng mình và các hình thức khác nhau nghiên cứu người dùng
- #11 K.I.S.S (Keep it simple, stupid) : Là một từ viết tắt cho các nguyên tắc thiết kế giữ nó đơn giản, ngu ngốc. Nguyên tắc là hầu hết các hệ thống làm việc tốt nhất nếu họ đang giữ đơn giản hơn làm phức tạp. Đơn giản là một mục tiêu quan trọng trong việc thiết kế. Hick’s Law: Luật của Hick mô tả thời gian cần cho một người để đưa ra quyết định, nếu lựa chọn nhiều sẽ làm tăng thời gian quyết định. Fitts’s Law Conditioning: Điều nói rằng khi một người nào đó được thưởng cho một hành động mà họ đưa họ sẽ làm lại lần nữa. Proximity The Mental Model The 80/20 Rule
- #12 Hick’s Law: Luật của Hick mô tả thời gian cần cho một người để đưa ra quyết định, nếu lựa chọn nhiều sẽ làm tăng thời gian quyết định.
- #13 Fitts’s Law: Luật của Fitts nói rằng có một mối liên hệ giữa tốc độ thời gian của tương tác với kích thước và sự liên quan trong thiết kế điện thoại di động, ở vị trí xa hơn và nhỏ hơn mục tiêu là khó khăn hơn đối với người sử dụng để nhấn nó một cách chính xác, vì vậy đây gọi sự chú ý đến vị trí hiệu quả của một phần tử trên màn hình.
- #14 Proximity: luật tiệm cận cho rằng các yếu tố gần nhau có liên quan hỗ trợ các khái niệm về tính nhất quán
- #15 The Mental Model: Nguyên tắc này nói rằng nó dễ dàng hơn cho người sử dụng hiểu và học được điều gì mới nếu nó được mô phỏng theo một cái gì đó họ đã hiểu được theo một nguyên tắc từ trước. Điều này liên quan đến cách sử dụng về cảm nhận kinh nghiệm, nếu người sử dụng cảm thấy tốt như cách sử dụng ứng dụng của họ, họ sẽ sử dụng các tính năng ứng dụng một lần nữa.
- #16 The 80/20 Rule: quy tắc này nói rằng phần lớn người dùng sẽ sử dụng nhiều 20% tính năng của ứng dụng, khi xác định những 20% tính năng đó là gì thì có thể thiết kế để nhấn mạnh các yếu tố quan trọng của ứng dụng, thiết kế trực quan để làm cho các tính năng đó dễ dàng sử dụng hơn với người dùng.
- #17 thiết kế các nhà sản xuất iOS và Android cung cấp mặc định khác nhau kiểm soát và kiến nghị quy ước cho các giao diện được sử dụng trên thiết bị của họ, nó tạo ra các tiêu chuẩn và kỳ vọng của người dùng đối với một thiết bị cụ thể. Tiêu chuẩn cho ứng dụng iOS và Android ứng dụng là thiết bị khác nhau bất khả tri, Thiết bị tiếp tục gia tăng và trở thành tiêu chuẩn thực hành UX được phát triển để giải quyết trực tiếp hơn các nhu cầu và mong muốn trong tương tác con người - máy tính với các thiết bị điều khiển cảm ứng nhỏ đang phát triển. => Một thiết bị thiết kế bất khả tri có thể có nhiều thời gian và do đó tốn kém hơn => nhưng nó thường có thể tạo ra một trải nghiệm mạnh mẽ hơn và do đó cuối cùng được lợi hơn thiết kế như vậy vẫn được vẽ cầu của người dùng trên các thiết bị và dựa trên các nguyên tắc thiết kế và xem xét khả năng sử dụng
- #18 chúng ta đang thấy ngày càng có nhiều trang web được thiết kế để phục vụ cho các bối cảnh điện thoại di động, thiết kế đáp ứng thiết lập thay đổi giữa kích cỡ màn hình, thích nghi với các điều khiển và lưu lượng để phục vụ cho sử dụng trong các bối cảnh khác nhau.
- #19 Thiết kế hiệu suất trung tâm tập trung vào hiệu suất và tốc độ, là chìa khóa cho một trải nghiệm người dùng tốt quyết định thiết kế nên xem xét các giải pháp phát triển có sẵn tốt nhất để đạt tốc độ và hiệu suất và các thiết kế phải phù hợp với những lựa chọn phát triển.
- #20 Xu hướng này được nhắm mục tiêu nhiều trang web được xây dựng cho trải nghiệm di động và có thể hoặc thậm chí không hoạt động trên máy tính để bàn hoặc máy tính xách tay, chúng thường được thiết kế cho một lần duy nhất mà có thể được chia sẻ mạng xã hội hơn là cung cấp một dịch vụ người dùng
- #21 Xu hướng cập nhật trực tiếp này dựa trên một công nghệ cho phép truyền thông tương tác giữa các ứng dụng trên thiết bị của người dùng và máy chủ, nó cập nhật trực tiếp đến nội dung. Một ví dụ điển hình của việc này là Yahoo weather hiển thị nhiệt độ hiện tại, tính năng cung cấp thông tin trực tiếp không chỉ là một xu hướng nhưng chúng trở thành kỳ vọng người sử dụng có ý nghĩa.
- #22 Nó là một xu hướng lớn không có tình trạng thiếu dịch vụ mới sắp ra trên thị trường trong đó cung cấp các công cụ cộng tác và các ứng dụng dựa trên web mà bạn đang làm việc chặt chẽ thông qua trình duyệt của bạn và không cần tải về một ứng dụng. Office 365 là một dịch vụ đăng ký tích hợp phiên bản gần đây nhất của Office, phiên bản hiện tại là Office 2016. Dịch vụ này tích hợp các ứng dụng mà bạn quen thuộc, như Word, PowerPoint và Excel, cùng dung lượng lưu trữ trực tuyến bổ sung, hỗ trợ kỹ thuật liên tục mà không mất thêm chi phí, cùng nhiều lợi ích khác https://support.office.com/vi-vn/article/C%C3%B3-g%C3%AC-kh%C3%A1c-bi%E1%BB%87t-gi%E1%BB%AFa-Office-365-v%C3%A0-Office-2016-ed447ebf-6060-46f9-9e90-a239bd27eb96
- #23 Tính năng hiển thị nội dung gần với bạn
- #25 Content First and Hidden Menus: đó là nội dung menu hiển thị đầu tiên và ẩn đi sau đó, (căn cứ luật của Hick tăng số lượng các lựa chọn có sẵn cho người sử dụng tại bất kỳ thời điểm nào sẽ làm tăng thời gian quyết định) nó cũng mất tập trung càng tí yếu tố người dùng phải xem xét để thực hiện một quyết định, xu hướng này cho phép người dùng sử dụng chỉ tập trung vào các nhiệm vụ hoặc các nội dung trước và ko bị phân tâm bởi quá nhiều lựa chọn
- #26 Approaches to Interactions and Content : Ý tưởng của cá nhân có thể có nhiều hình thức khác nhau tùy thuộc vào mục tiêu của ứng dụng các dịch vụ mà nó cung cấp, các nội dung mà nó cung cấp (ví dụ như việc đọc 1 bài báo, 1 sản phẩm … sau sẽ được gợi ý trên new feed của facebook) Personalization & Customization (cá nhân hóa và tùy biến) Xu hướng cá nhân hóa và tùy biến của một kinh nghiệm Gesture-based interaction và trong môi trường di động cảm ứng chúng ta đang thấy một sự thúc đẩy lớn đối với cử chỉ dựa trên tương tác khai thác các loại khác nhau của các cử chỉ cảm ứng cho các hoạt động khác nhau,
- #27 Large images & video Ở điểm tập trung vào nội dung đang có một xu hướng sử dụng hình ảnh và video lớn Modular Design Xu hướng thiết kế module là một cách tiếp cận chia nhỏ một hệ thống thành các phần nhỏ hơn có thể tạo ra một cách độc lập và những bộ phận này cũng có thể có khả năng được sử dụng hoặc tái sử dụng trong các hệ thống khác nhau Social Sharing bối cảnh chia sẻ mạng xã hội là muốn xu hướng lớn, chúng tôi đã nhìn thấy khả năng để chia sẻ tin tức và chia sẻ các nguồn dữ liệu lên facebook => giúp truyền bá nội dung của bạn và cũng cá nhân hóa tùy biến
- #28 yêu cầu của một dự án có thể trình bày những thách thức và những liên quan đến việc này sẽ khác nhau với mỗi khách hàng mới. Một số khách hàng sẽ cung cấp cho bạn các tài liệu và những người khác sẽ không có gì. Họ thích gì, họ cần gì, họ muốn gì => yêu cầu chi tiết
- #29 đầu tiên cần một cuộc phỏng vấn sâu với khách hàng ngay cả khi bạn đã nhận được tài liệu, đừng cho rằng khách hàng biết những gì họ cần Mục đích pv: để bạn có thể thấy rằng họ có ý kiến khác nhau về các yêu cầu mà cần phải được cân đối nếu có phỏng vấn từng người => ghép nối với nhau từ các bộ phận liên quan
- #30 Phần đầu tiên của một tài liệu yêu cầu lý tưởng nên nắm bắt được: mục tiêu của dự án, mục đích của ứng dụng là gì và làm thế nào nó sẽ phục vụ mục đích này. Ứng dụng tuyệt vời có một mục đích tập trung để đặt câu hỏi điều gì sẽ ứng dụng này là tuyệt vời tại xác định các mục tiêu cần thiết và giữ cho chúng đơn giản trong phần mở đầu này của tài liệu cùng với trạng thái mục đích rõ ràng những gì, các ứng dụng là gì và nó sẽ làm gì với việc giới thiệu rõ ràng dòng chảy của các tài liệu nên có ý nghĩa
- #31 Indentity Is there an existing brand identity for the application? Has a brand position been created for it? Nhận diện thương hiệu và ví trí thương hiệu có thể ảnh hưởng rất nhiều đến yêu cầu để tìm ra những gì khách hàng có trong tâm trí và trong phần mở đầu này, môt số khách hàng có thể đã trải qua quá trình xác định những gì các ứng dụng sẽ được gọi là phát triển một tuyên bố đầy đủ cho các vị trí thương hiệu và bản sắc và tạo ra một biểu tượng khách hàng khác sẽ được thực hiện không có sự chuẩn bị và dự kiến sẽ được một phần của quá trình thiết kế trong trường hợp khác, các khách hàng tổ chức sẽ có một bản sắc thương hiệu mạnh và chúng tôi sẽ yêu cầu những hướng dẫn được áp dụng cho cá ứng dụng một cách thích hợp, một cách thích hợp là một từ khóa ở đây trong suốt quá trình đó là một công việc của bạn để giữ tập trung và thực hành tốt nhất và tuyệt vời sự lựa chọn cho các ứng dụng thiết kế Focus on what will be achieved not how it will be achieved Vì vậy khi nói đến kinh nghiệm người dùng giữ các tài liệu yêu cầu tập trung vào những gì là phải đạt được không phải là cách nó sẽ đạt được
- #32 Phần đầu tiên của một tài liệu yêu cầu lý tưởng nên nắm bắt được: mục tiêu của dự án, mục đích của ứng dụng là gì và làm thế nào nó sẽ phục vụ mục đích này. Ứng dụng tuyệt vời có một mục đích tập trung để đặt câu hỏi điều gì sẽ ứng dụng này là tuyệt vời tại xác định các mục tiêu cần thiết và giữ cho chúng đơn giản trong phần mở đầu này của tài liệu cùng với trạng thái mục đích rõ ràng những gì, các ứng dụng là gì và nó sẽ làm gì với việc giới thiệu rõ ràng dòng chảy của các tài liệu nên có ý nghĩa