際際滷

際際滷Share a Scribd company logo

Information Architecture in Mobile

Download as PPTX, PDF
Lazar Petrakiev
Lazar Petrakiev

The document is a presentation about information architecture for mobile applications. It discusses key concepts of information architecture including structure, organization, labeling, and navigation. It also covers user analysis techniques like creating personas and card sorting to help design intuitive information architectures for mobile. The presentation provides examples of common information architecture patterns for mobile like hub-and-spoke and tabbed views. It emphasizes the importance of analyzing user needs and testing designs with users.

1 of 49
Downloaded 15 times
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved.
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Information Architecture in Mobile 2 Lazar Petrakiev Creative Lead, MentorMate BG / Country Manager, IDF Lazar_PetrakievLazar Petrakiev February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Agenda workshop Introduction What is IA Design the IA Structure your content Analyzing the users 3 February 13, 2015 Better Content & Navigation - Persona Creation - Card Sorting Q&A
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Introduction 4 February 13, 2015 Focus on Mobile Build intuitive applications IA is fundamental for every industry
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. What is Information Architecture IA in every small & big project Most important aspects Example from the real live 5 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. What is Information Architecture The structural design of an information environments. Combination of organization, labeling, search, and navigation systems The art and science of shaping information products and experiences to support usability and findability An emerging discipline focused on bringing principles of design and architecture to the digital landscape. 6 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. What is Information Architecture Structuring Organization Labelling Finding Managing 7 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Why Information Architecture Matters Why should you care? The cost of not finding information The value of education The cost of construction 8 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved.9 February 13, 2015 The IA is under the surface Clear and appropriate the names Well controlled dictionary can affect the IA
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved.10 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture How is mobile different Mobile devices are lighter More portable We feel a unique, emotional connection to them 11 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture How is mobile different Touch screen displays Limited space Containing only the most important things Mobile data transfer Limited connectivity 12 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture How is mobile different They are with us everywhere 63% of people feel lost if their smartphone are not in easy reach Mobile diversity affects UCD - Delivery methods - IA 13 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture How is mobile different 4 delivery methods - Mobile version - Responsive website - Mobile native application - Mobile hybrid application 14 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved.15 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for web: Hierarchical tree PROS Information-rich websites Many routes explore CONS Does not fit in mobile Link-heavy 16 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for mobile: Nested Doll PROS Keep users' attention Good for small screens CONS Difficult crossing between first & last screen 17 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for mobile: Hub & Spoke PROS Prevent users from distractions Good for multi-functional apps CONS The sections are isolated each other 18 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for mobile: Bento Box / Dashboard PROS Multi-functional tools Content-based tablet apps CONS User's interaction between each section 19 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for mobile: Filtered View PROS Large quantities of content Suitable to be sub-pattern CONS More Complex Difficult to display on smaller screens 20 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for mobile: Tabbed View PROS Good for multi-tasking Intuitive and easy navigation CONS Best suited only to simple content structures 21 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for mobile: Combined Systems There is no right or wrong way. Everything is based on the projects' and users' needs 22 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Structure Your Content Content Inventory Full Content Inventory Partial Content Inventory Content Audit 23 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Structure Your Content Full Content Inventory All screens/pages All downloadable files All embedded objects All additional content as users' comments 24 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Structure Your Content Content Inventory: What to Include? Link name: The label used in navigation Page name Page URL Content type: how-to, product, brochure, report, spec-doc ... Resources: Downloadable files attached Status: Is it current or out of date? Date updated Comments 25 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users 26 February 13, 2015 What type of information users need How they are using it Where they are using it Make sure the content is easy to use
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users Whom to learn from? Screening Market segmentation research Learn from competition 27 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users Create a Plan! Short introduction What is the intent of the study Basic factual or demographic questions Question specific for the study 28 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users The Questionnaire Give me more information about your current job Why you do exactly this job? What is your role in the organization? What are your responsibilities in your job? How long have you been (designing)? What professional skills you have? 29 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users The Questionnaire What do you do to improve and develop your skills? What are your sources of knowledge? Would you consider to work for another company? Why? Walk me through a typical day in your life! How often are you online? What computers or devices do you use? 30 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users The Questionnaire When do you use each of them? Do you share any of them? What do you typically do online? What do you typically do on your days off? How do you decide what to do? Tell me about how your children use the internet. 31 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users The Questionnaire How do you decide what to do on your days off with your kids? What are your particular non-work interests? What do you read online besides the news? How frequently do you visit museums in your town? Which ones? 32 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Creating Personas What is "User Personas" - Fictional profile of the consumer - Detailed description - Focus on the target group - Use several Personas How it helps us 33 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Creating Personas History The method appears in late 90's User archetypes, User models, Lifestyle snapshots, and Model users The Book: "The Inmates are Running the Asylum" by Alan Cooper 34 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Creating Personas When to Begin? Earliest in the process As part of the user research process 35 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Creating Personas The Process of The whole team should be involved Build relationship between the team and the personas Define users characteristics based on the research Add specific details 36 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Creating Personas Persona's Profile Information Name, age, gender, and a photo What they do in real life Experience level in the area of your product or service How they would interact with your product Goals and concerns Quotes to sum up the personas attitude 37 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting What is Card Sorting What are the benefits - Create the structure of your app - What to put on the home screen - Labeling the items in the navigation 38 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Types Open Card Sorting Closed Card Sorting Hybrid Card Sorting 39 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Best Practices Limit the number of cards Estimate the time Think about the benefits of each session 40 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting How to Conduct Prepare the Cards Set-up the Session Lead the Session Remote sorting sessions Analyze Your Data 41 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Prepare the Cards Create your list of content topics (50 or less) List the most important Base the list on the Content Inventory Physical or Online card-sorting 42 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Set-up the Session Plan about 20min. for 30 / 30min. for 50 cards Make sure everything works Involve another member of your team Arrange for payment 43 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Lead the Session Show the cards and share the intent Ask the participant to talk out loud Ask if some of the groups could be combined Ask the participant to name each category Thank the participant and give the payment 44 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Remote Session Create your list of content topics Prepare the cards according to the software instructions Email your participants a link to the study Ask them to leave a comment Thank the participant Provide instructions for receiving payment 45 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Analyze your Data Use the generated data by the software Take a photo of the cards for physical sessions Analyze quantitative information - Which cards appeared together most often - How often cards appeared in specific categories Pull together your findings in a report 46 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Time to Practice 47 February 13, 2015
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved.48 February 13, 2015 References & Sources: http://iainstitute.org http://www.nngroup.com http://www.uxbooth.com http://www.smashingmagazine.com http://www.usability.gov/ https://www.interaction-design.org/encyclopedia/card_sorting.html https://www.interaction-design.org/encyclopedia/personas.html http://alistapart.com/article/interviewing-humans http://www.ux-lady.com/diy-user-personas/ A Practical Guide to Information Architecture - by Donna Spencer Information Architecture for the World Wide Web - by Louis Rosenfeld and Peter Morville Websites: Books:
CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Thank you Lazar Petrakiev Creative Lead MentorMate Lazar_PetrakievLazar Petrakiev 49 February 13, 2015

More Related Content

Information Architecture in Mobile

  • 1. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved.
  • 2. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Information Architecture in Mobile 2 Lazar Petrakiev Creative Lead, MentorMate BG / Country Manager, IDF Lazar_PetrakievLazar Petrakiev February 13, 2015
  • 3. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Agenda workshop Introduction What is IA Design the IA Structure your content Analyzing the users 3 February 13, 2015 Better Content & Navigation - Persona Creation - Card Sorting Q&A
  • 4. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Introduction 4 February 13, 2015 Focus on Mobile Build intuitive applications IA is fundamental for every industry
  • 5. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. What is Information Architecture IA in every small & big project Most important aspects Example from the real live 5 February 13, 2015
  • 6. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. What is Information Architecture The structural design of an information environments. Combination of organization, labeling, search, and navigation systems The art and science of shaping information products and experiences to support usability and findability An emerging discipline focused on bringing principles of design and architecture to the digital landscape. 6 February 13, 2015
  • 7. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. What is Information Architecture Structuring Organization Labelling Finding Managing 7 February 13, 2015
  • 8. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Why Information Architecture Matters Why should you care? The cost of not finding information The value of education The cost of construction 8 February 13, 2015
  • 9. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved.9 February 13, 2015 The IA is under the surface Clear and appropriate the names Well controlled dictionary can affect the IA
  • 10. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved.10 February 13, 2015
  • 11. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture How is mobile different Mobile devices are lighter More portable We feel a unique, emotional connection to them 11 February 13, 2015
  • 12. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture How is mobile different Touch screen displays Limited space Containing only the most important things Mobile data transfer Limited connectivity 12 February 13, 2015
  • 13. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture How is mobile different They are with us everywhere 63% of people feel lost if their smartphone are not in easy reach Mobile diversity affects UCD - Delivery methods - IA 13 February 13, 2015
  • 14. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture How is mobile different 4 delivery methods - Mobile version - Responsive website - Mobile native application - Mobile hybrid application 14 February 13, 2015
  • 15. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved.15 February 13, 2015
  • 16. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for web: Hierarchical tree PROS Information-rich websites Many routes explore CONS Does not fit in mobile Link-heavy 16 February 13, 2015
  • 17. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for mobile: Nested Doll PROS Keep users' attention Good for small screens CONS Difficult crossing between first & last screen 17 February 13, 2015
  • 18. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for mobile: Hub & Spoke PROS Prevent users from distractions Good for multi-functional apps CONS The sections are isolated each other 18 February 13, 2015
  • 19. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for mobile: Bento Box / Dashboard PROS Multi-functional tools Content-based tablet apps CONS User's interaction between each section 19 February 13, 2015
  • 20. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for mobile: Filtered View PROS Large quantities of content Suitable to be sub-pattern CONS More Complex Difficult to display on smaller screens 20 February 13, 2015
  • 21. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for mobile: Tabbed View PROS Good for multi-tasking Intuitive and easy navigation CONS Best suited only to simple content structures 21 February 13, 2015
  • 22. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Design the Information Architecture IA patterns for mobile: Combined Systems There is no right or wrong way. Everything is based on the projects' and users' needs 22 February 13, 2015
  • 23. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Structure Your Content Content Inventory Full Content Inventory Partial Content Inventory Content Audit 23 February 13, 2015
  • 24. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Structure Your Content Full Content Inventory All screens/pages All downloadable files All embedded objects All additional content as users' comments 24 February 13, 2015
  • 25. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Structure Your Content Content Inventory: What to Include? Link name: The label used in navigation Page name Page URL Content type: how-to, product, brochure, report, spec-doc ... Resources: Downloadable files attached Status: Is it current or out of date? Date updated Comments 25 February 13, 2015
  • 26. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users 26 February 13, 2015 What type of information users need How they are using it Where they are using it Make sure the content is easy to use
  • 27. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users Whom to learn from? Screening Market segmentation research Learn from competition 27 February 13, 2015
  • 28. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users Create a Plan! Short introduction What is the intent of the study Basic factual or demographic questions Question specific for the study 28 February 13, 2015
  • 29. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users The Questionnaire Give me more information about your current job Why you do exactly this job? What is your role in the organization? What are your responsibilities in your job? How long have you been (designing)? What professional skills you have? 29 February 13, 2015
  • 30. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users The Questionnaire What do you do to improve and develop your skills? What are your sources of knowledge? Would you consider to work for another company? Why? Walk me through a typical day in your life! How often are you online? What computers or devices do you use? 30 February 13, 2015
  • 31. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users The Questionnaire When do you use each of them? Do you share any of them? What do you typically do online? What do you typically do on your days off? How do you decide what to do? Tell me about how your children use the internet. 31 February 13, 2015
  • 32. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Analyzing the users The Questionnaire How do you decide what to do on your days off with your kids? What are your particular non-work interests? What do you read online besides the news? How frequently do you visit museums in your town? Which ones? 32 February 13, 2015
  • 33. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Creating Personas What is "User Personas" - Fictional profile of the consumer - Detailed description - Focus on the target group - Use several Personas How it helps us 33 February 13, 2015
  • 34. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Creating Personas History The method appears in late 90's User archetypes, User models, Lifestyle snapshots, and Model users The Book: "The Inmates are Running the Asylum" by Alan Cooper 34 February 13, 2015
  • 35. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Creating Personas When to Begin? Earliest in the process As part of the user research process 35 February 13, 2015
  • 36. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Creating Personas The Process of The whole team should be involved Build relationship between the team and the personas Define users characteristics based on the research Add specific details 36 February 13, 2015
  • 37. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Creating Personas Persona's Profile Information Name, age, gender, and a photo What they do in real life Experience level in the area of your product or service How they would interact with your product Goals and concerns Quotes to sum up the personas attitude 37 February 13, 2015
  • 38. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting What is Card Sorting What are the benefits - Create the structure of your app - What to put on the home screen - Labeling the items in the navigation 38 February 13, 2015
  • 39. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Types Open Card Sorting Closed Card Sorting Hybrid Card Sorting 39 February 13, 2015
  • 40. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Best Practices Limit the number of cards Estimate the time Think about the benefits of each session 40 February 13, 2015
  • 41. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting How to Conduct Prepare the Cards Set-up the Session Lead the Session Remote sorting sessions Analyze Your Data 41 February 13, 2015
  • 42. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Prepare the Cards Create your list of content topics (50 or less) List the most important Base the list on the Content Inventory Physical or Online card-sorting 42 February 13, 2015
  • 43. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Set-up the Session Plan about 20min. for 30 / 30min. for 50 cards Make sure everything works Involve another member of your team Arrange for payment 43 February 13, 2015
  • 44. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Lead the Session Show the cards and share the intent Ask the participant to talk out loud Ask if some of the groups could be combined Ask the participant to name each category Thank the participant and give the payment 44 February 13, 2015
  • 45. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Remote Session Create your list of content topics Prepare the cards according to the software instructions Email your participants a link to the study Ask them to leave a comment Thank the participant Provide instructions for receiving payment 45 February 13, 2015
  • 46. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Analyze your Data Use the generated data by the software Take a photo of the cards for physical sessions Analyze quantitative information - Which cards appeared together most often - How often cards appeared in specific categories Pull together your findings in a report 46 February 13, 2015
  • 47. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Card Sorting Time to Practice 47 February 13, 2015
  • 48. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved.48 February 13, 2015 References & Sources: http://iainstitute.org http://www.nngroup.com http://www.uxbooth.com http://www.smashingmagazine.com http://www.usability.gov/ https://www.interaction-design.org/encyclopedia/card_sorting.html https://www.interaction-design.org/encyclopedia/personas.html http://alistapart.com/article/interviewing-humans http://www.ux-lady.com/diy-user-personas/ A Practical Guide to Information Architecture - by Donna Spencer Information Architecture for the World Wide Web - by Louis Rosenfeld and Peter Morville Websites: Books:
  • 49. CONFIDENTIAL 息 MobCon Bulgaria. All rights reserved. Thank you Lazar Petrakiev Creative Lead MentorMate Lazar_PetrakievLazar Petrakiev 49 February 13, 2015