Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Bootstrapping the Information Architecture (Italian IA Summit)

When I design, it is in the early stages of an interactive system’s life. There are no widgets to place on screens, or menus to collapse or expand. No wireframes, no screen flows, no accessibility or SEO issues. No search, no controlled vocabulary, no settings screens or personalisation options to design. In short: the project needs to be bootstrapped.

I am involved when a lot of things need to be explored and modelled; the scope and environment of the system, the core concepts that make up its parts, their relationships and their names. So what do we produce in that stage? Mostly so-called concept diagrams.
In this talk, I explain what concept diagrams are, referencing other people’s experiences as well as my own, and how they are useful when a design needs to be bootstrapped. I show how I have used variations of them in recent assignments for KLM and the City of Amsterdam, among others. I will try to convince you that you should create one for each and every situation that needs bootstrapping.

  • Soyez le premier à commenter

Bootstrapping the Information Architecture (Italian IA Summit)

  1. 1. BOOTSTRAPPING THE IA XIV
 ITALIAN
 IA SUMMIT PETER BOERSMA. @PBOERSMA.
  2. 2. BOOTING… I PETER’S WORK. MY AMSTERDAM.
  3. 3. In 2015, I was hired 
 by the City of Amsterdam 
 as online product manager to develop the concept for 
 an online integrated customer view and manage its 
 user experience strategy and roadmap
  4. 4. I am an elevator pitch for citizens, companies and institutes the City of Amsterdam offers 
 an online integrated customer view 
 application which is a layer over 
 a channel-independent application
  5. 5. I am an online integrated customer view for citizens, companies and institutes who want to know how they are registered with the City who want to know (the history of) the status of service-processes they are engaged in who want to (and are allowed to) take next steps in these processes who don’t want to (or can’t) use other channels such as a service desk or call centre the City of Amsterdam offers an online Integrated Customer View application where their registered pro fi le is shown where the status of current and completed processes are shown where information about, and links to, possible actions are given where suggestions for other, relevant processes are made which is a layer over a channel-independent application with layers for other target groups, e.g. civil servants with layers for other channels, e.g. mobile, service desks, call centre with an underlying layer of webservices to support all applications My Amsterdam 
 (online & personal) Integrated 
 Customer View 
 (not public & virtual) } }
  6. 6. I am an online integrated customer view the concept sketch
  7. 7. I am an online integrated customer view the current situation - of fl ine product-specific application
  8. 8. 
 info 
 & 
 application 
 forms professional ? product-specific application
  9. 9. fi le product 
 statuses citizen login welcome product webservice 100 product
  10. 10. I am an online integrated customer view webservices are also connected to applications for professionals product-specific application 
 statuses product webservice 100 product
  11. 11. I am an online integrated customer view a citizen’s context determines which products get suggested suggestion engine citizen professional My Amsterdam 
 statuses suggestion my pro fi le public website 
 info 
 & 
 application 
 forms product-specific application
  12. 12. 
 status my pro fi le view
  13. 13. 
 status product-specific application 
 suggestion
  14. 14. I am an online integrated customer view the collection of web services is the real integrated customer view web
  15. 15. 1. the main concepts the system will expose to its users, 2. how those concepts relate to each other to help users accomplish their purposes within the system, and 3. the language that will be used to describe those concepts so users can understand them” Jorge Arango, A Pain With No Name, https://jarango.com/2018/03/26/a-pain-with-no-name/
  16. 16. “A concept model is a visual representation of a set of ideas that clari fi es the concept for both the thinker and the audience. It is a useful and powerful tool for user experience designers but also for business, engineering, and marketing… basically anyone who needs to communicate complexity. 
 Which is most of us, these days.” Christina Wodtke, How to Make a Concept Model, https://boxesandarrows.com/how-to-make-a-concept-model/
  17. 17. “A concept map is a picture of our understanding of something. It is a diagram illustrating how sets of concepts are related. Concept maps are made up of webs of terms (nodes) related by verbs (links) to other terms (nodes). The purpose of a concept map is to represent (on a single visual plane) a person’s mental model of a concept.” Hugh Dubberly, Creating Concept Maps, http://www.dubberly.com/concept-maps/creating-concept-maps.html
  18. 18. boxes for the concepts (“things”) which the user will be confronted with concept diagrams are drawings that illustrate concepts A B
  19. 19. arrows indicating the relationships between the concepts concept diagrams are drawings that illustrate concepts
  20. 20. the terminology used, both user-facing and - if necessary - team jargon concept diagrams are drawings that illustrate concepts concept A concept B is a part of
  21. 21. the scope of the product or service that is proposed concept diagrams are drawings that illustrate concepts
  22. 22. the environment in which the product or service will operate concept diagrams are drawings that illustrate concepts
  23. 23. they are story-telling devices for products or services concept diagrams are drawings that illustrate concepts concept A concept B relationship scope environment
  24. 24. 4 related diagrams mind map system map concept illustration mental model complete incomplete personal shared concept diagram
  25. 25. what concept diagrams are NOT “The conceptual model of an interactive system is not the user interface. It is not about how the software looks or how it feels. It does not mention keystrokes and mouse-actions, screen graphics and layout, commands, navigation schemes, dialog boxes, controls, data presentation, or error messages. It does not say whether the software is operated through a GUI on a personal computer or by voice-commands over a telephone. It describes only what people can do with the system and what concepts they need to understand to operate it” Jeff Johnson, Austin Henderson, Conceptual Models, http://interactions.acm.org/archive/view/january-2002/conceptual-models1
  26. 26. what concept diagrams are NOT “Conceptual models make stakeholders nervous. Why? Because they’re not user interfaces. Stakeholders want to see progress. They expect designers to produce artefacts that look like screens. Conceptual models don’t look like screens; they’re “boxes and arrows” diagrams. Getting to the stage where you can produce a conceptual model takes lots of work, and at the end of that effort, you have… a diagram” Jeff Johnson, Austin Henderson, Conceptual Models, http://interactions.acm.org/archive/view/january-2002/conceptual-models1
  27. 27. “Concept models are not for everyone. When I show fellow designers these artefacts, I sometimes get “You show that to clients?” Like any deliverable, there’s a time and a place for concept models. If you’re anything like me, however, you think visually. Even if your models don’t see the light of day, a good model can help you get a better grip on the problem, or lay some groundwork for your designs.” Dan Brown, In Which a Concept Model Makes Me Giddy, https://articles.uie.com/concept_models/ what concept diagrams are NOT
  28. 28. REBOOT THE DESIGN III 3 STORIES 3-LETTER COMPANIES.
  29. 29. Between 2007-2010, I worked as UX Lead on a 3-year project by INFO.NL, aimed at creating a new marketing website for SNS, the 3rd largest bank in The Netherlands. We spoke to a lot of stakeholders and came up with the following concept diagram:
  30. 30. LIFE
  31. 31. LEARN
  32. 32. PLAY
  33. 33. BUY
  34. 34. BUY LIFE LEARN PLAY
  35. 35. Learn Learn Learn Buy Play
  36. 36. Life Play Life Life Learn Buy
  37. 37. Learn Learn Learn Buy Play
  38. 38. Buy Buy Buy
  39. 39. 4 related diagrams mind map system map concept illustration concept diagram mental model
  40. 40. In 2015, I worked as a UX Strategist at SDL, a content management and translation software company. My job was putting “enough” UX on the roadmaps owned by product managers. SDL acquired MediaManager, a Digital Asset Management product, and while it was getting re- platformed, we had an opportunity to change the way it was perceived by its customers; mapping existing features to marketable user needs.
  41. 41. Bryce Glass, Flickr User Model, https://www. fl ickr.com/photos/bryce/tags/ fl ickrusermodel/
  42. 42. 4 related diagrams mind map concept illustration concept diagram mental model system map
  43. 43. In 2018, I worked as a freelance UX Strategist for KLM Digital Studio, where B2E applications were made. My job was to design a personalised intranet. I was team member #2 (#1 was the Product Manager) and started after a Design Sprint hadn’t gone anywhere. 
 
 I started talking to stakeholders and mapped users, content suppliers, and source systems.
  44. 44. Intranets at KLM More Intranets at KLM
  45. 45. core concept
  46. 46. core concept
  47. 47. suppliers
  48. 48. users
  49. 49. content sources
  50. 50. terminology
  51. 51. 4 related diagrams mind map system map concept illustration concept diagram mental model
  52. 52. BOOTSTRAP YOUR IA IV HOW TO MAKE THEM. WHY MAKE THEM?
  53. 53. concept A concept B relationship scope environment
  54. 54. One approach that works for me is to ask the team to stop thinking about the thing we’re designing as software and start thinking about it as a place. 
 1. identify the tasks, objects, groupings, relationships, actions, etc. that will comprise the system, 2. de fi ne the names and attributes of those things, and 3. think through the choreography required for people to ful fi l tasks in the environment Jorge Arango, Start With a Conceptual Model, https://jarango.com/2017/09/29/start-with-a-conceptual-model/ Jorge Arango’s 1-2-3
  55. 55. 2. 3. 3. 2. Draw the branch
  56. 56. 1. Determine the goal: How will the model be used, by whom? What is the job of the model? To change minds, explain a concept, simplify complexity? 2. Inventory the concepts: Brainstorm many parts of your concept. Keep adding more in the margins as you go. 3. Inspect the concepts: Are there many concepts hiding in one? Do you really understand each idea? 4. Determine the relationships: How do the concepts interact? Christina Wodtke, How to Make a Concept Model, https://boxesandarrows.com/how-to-make-a-concept-model/ Christina Wodtke, step 1-4 of 10
  57. 57. 5. Decision point: Do I understand the ideas and what I’m trying to communicate? Test: Ask yourself if the model “feels” right. If yes, then continue. 7. Iterate with words and pictures: Talk to yourself and draw it out! 8. Evaluate with yourself/the client: Keep making sure the drawings match the ideas you wish to communicate. Christina Wodtke, How to Make a Concept Model, https://boxesandarrows.com/how-to-make-a-concept-model/ Christina Wodtke, step 5-8 of 10
  58. 58. 9. Decision point: Does my audience understand the ideas and what I’m trying to communicate?  
 Test: Can my audience answer key questions with the model?  
 If yes, then continue. 10. Re fi ne: Use color, type, line weight, and labels to make sure you are communicating clearly. Christina Wodtke, How to Make a Concept Model, https://boxesandarrows.com/how-to-make-a-concept-model/ Christina Wodtke, step 9-10 of 10
  59. 59. “Making a concept map in an area that is well de fi ned is sometimes fairly easy — if the information space can easily be found and if most authorities agree on it. 
 
 For more ambiguous topics, a great deal of time may be needed to agree on scope (which terms are in or out) and on structure (how those terms relate). This process can take several weeks or even several months.” Hugh Dubberly, Creating Concept Maps, http://www.dubberly.com/concept-maps/creating-concept-maps.html Hugh Dubberly on how long it takes
  60. 60. Initially, is the content that matters most: • the names for the “things” 
 (“is an entrepreneur also a citizen?”), • the types of relationships 
 (“A is part of B”, “A generates B”, “A is responsible for many B’s”), • whether the described elements are new or existing, and in scope or out of scope 
 (“do My Amsterdam status updates end up in the city archive, or does the system have a separate archive?”) Peter’s 4 phases
  61. 61. Concept diagrams will go through many iterations, so don’t try to get too hung up on the layout or visual design. It is okay if they are rough sketches that you update after every meeting or a good night sleep. Some limited use of color may be useful, as well as varying line thickness. Peter’s 4 phases
  62. 62. Later, when you share your diagrams with others, you will want to align core elements visually: • Main concepts may end up at the centre, on opposite sides of the diagram, or in corners. • Similar concepts get grouped together and their boxes are given the same size. • You may even decide to use icons or small illustrations for some of the concepts (different types of users, or paper versus screens), but don’t do that for all of them. Peter’s 4 phases
  63. 63. The most important lesson is: Always be open to feedback from others and suggestions for improvements of the diagram; it is the shared understanding of the concepts and their relationships that counts! Peter’s 4 phases
  64. 64. “Use concept models for yourself. Ultimately, they are the most sel fi sh, introspective, and self-indulgent artifact, a means for facilitating your own creative process.” Dan Brown, Communicating Design: Developing Web Site Documentation for Design and Planning why make a concept diagram?
  65. 65. “There really is only one reason to create a concept model: to understand the different kinds of information that the site needs to display. This structure can drive requirements for the page designs, helping you to determine how to link templates to each other. With the structure ironed out, you might also use the model to help scope your project— determining what parts of the site to build when. Dan Brown, Communicating Design: Developing Web Site Documentation for Design and Planning why make a concept diagram?
  66. 66. “A good one will clarify hidden complexity and highlight overlooked opportunities. It’ll guide the team to produce user interfaces that are coherent, clear, and solve real problems for the user.” Jorge Arango, A Pain With No Name, https://jarango.com/2018/03/26/a-pain-with-no-name/ why make a concept diagram?
  67. 67. “By carefully crafting an explicit conceptual model focused squarely on the target task-domain, and then, and only then, designing a user interface from that, the resulting product or service will be simpler, more coherent, and easier to learn.” Jeff Johnson & Austin Henderson, Conceptual Models, http://interactions.acm.org/archive/view/january-2002/conceptual-models1 why make a concept diagram?
  68. 68. “I teach user experience design, and my syllabus always includes concept models. Students of mine who do a concept model before working on the interaction design and information architecture always make better and more coherent products. The act of ordering information forces them to think through how all the disparate elements of a product fi t together.” Christina Wodtke, How to make a concept model, https://boxesandarrows.com/how-to-make-a-concept-model/ why make a concept diagram?
  69. 69. The act of making and re fi ning the diagram allows the designers and their stakeholders to discuss and agree on the scope of the product or service that is proposed, its terminology, and its so-called ’umfeld' (environment). Labelling the relationships between concepts helps to discover many types of requirements. The resulting diagrams are great visual aids when telling the story of a product or service that doesn't exist yet. why make a concept diagram?
  70. 70. concept A concept B relationship scope environment they are story-telling devices for products or services concept diagrams are drawings that illustrate concepts
  71. 71. BOOTSTRAPPING THE IA XIV
 ITALIAN
 IA SUMMIT PETER BOERSMA. @PBOERSMA.

×