Brainstorm Book


Published on

interactive user experience by Channing Ritter & Suzi Slavik, 2009.

Published in: Technology, Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Brainstorm Book

  1. 1. BRAINSTORMINGIN THE LIVING ROOMan interactive user experiencedeveloped by Channing Ritter & Suzi Slavik
  2. 2. LIVING ROOM OBSERVATIONS> activity center of the house> communal meeting space> multifunctional setting for eating, sleeping, working, ect.> level of interaction is highly variable> serves as introduction to a home
  3. 3. OPPORTUNITY & FOCUS> the living room as a space conducive to problem solving and creative endeavors
  4. 4. BRAINSTORMING IS AWESOME> Complex problems don’t have immediate, simple solutions.> Thorough development of concepts via collecting, exploring, and sharing of ideas, materials & inspiration will establish innovative and comprehensive solutions for a given problem.> Brainstorming is beneficial because it stimulates 1. depth in thought process (get beyond those cliché solutions) 2. numerous ideas (not stuck on 1 bad approach, pick from best) 3. discovery & dialogue (be smarter with research & discussion) RESULT: more successful solutions (hooray)
  5. 5. BRAINSTORMING IN THE LIVING ROOM> Neutral, consistent, comfortable and casual, the living room is perfect spot to let your ideas flow openly> Appropriate for a group exchange or by yourself> Physical comfort during mentally strenuous activity promotes focus
  6. 6. POTENTIAL USER #1DESIGN STUDENT> osu department of designsenior level
  7. 7. TOOLS > pen & paper: sketches, notes > internet sources:> magazines: youtube, ffffound, flickrprint, how, good, cmyk
  8. 8. PROCESS> generating a list of interests and ambitions as they relate tothe potential project> gathering relevent influences and inspirations> referencing principles and elements of design> thinking in terms of different techniques and mediums> connecting alike thoughts> strategizing with words
  9. 9. POTENTIAL USER #2MARINE INFANTRY OFFICER> rifle platoon commander2nd lieutenant
  10. 10. ag a i a fh ns n t
  11. 11. PROCESSBAMCIS> Begin planning METT-C> Arrange reconaissance > Mission> Make reconaissance > Enemy> Complete the plan > Terrain and weather> Issue the order > Troops and fire support> Supervise > Cultural considerations
  12. 12. IDENTIFYING THE NEEDS OFPOTENTIAL USERS> The brainstorm tool needs to be able to accomodate both structured and unstructured problems, as seen in the two extremely different processes of a design student and a Marine Officer.> The tool must have dramatic and obvious user benefits in order to sway people to use it over the traditional pencil and paper method. Among these benefits are: -easy to track progress and evolution of brainstorm -mobile and sharable qualities -visualization of large quantities of information in a simple format
  13. 13. THE BRAINSTORM TOOL> Collect your thoughts & inspirations, expand upon your initial ideas, organize your gathered information, and share your ideas with others> The “brainstorm book” is an inconspicuous addition to the living room bookshelf. With the familiarity a book’s shape and size, the “brainstorm book” is a unobtrusive tool that can be transported and handled in a manner similar to an actual book.
  14. 14. INITIAL LOOK INTO MODES &TYPES OF INTERACTIONSYOUR ACTIONS> MODE: COLLECT > MODE: CATALOG > MODE: MOBILE ACCESSYou Need to Collect Your Sources. You Need to Organize Your Input You Need to Input Information on the Go-type it -use auto-generated topics that you can -from your phone, call and leave messages,-scan it use to sort your sources (ie color, subject, texts, pictures, etc-draw it medium) -from a computer,-record it (photo/video camera) -manually sort your input-browse the web -highlight text or images -call/text from phone-upload files -active state edit -remote access via email/ip address?-highlight text or images -use auto-scale categories by-record with microphone (less info, more info) > NAVIGATE -manual scaling -focus in/out (not static, z-axis) -rollover magnify> MODE: EXPANDYou Need to Expand Your Ideas. > MODE: SHAREYou are Stuck. You Need to Share Your Work-consult thesaurus -email-auto-generated list of related links -export different file types-auto-generated list of related images -print preview-auto-generated list of related videos -compare simultaneously to-use scramble device offering info like other brainstormswhat’s happening now, around me, -offspring: your brainstorm merges withkeywords, random etc. another brainstorm producing a baby
  15. 15. BOOK FORMAT Primary Navigational Toolbar means of moving within different modes Secondary Navigational Toolbar sub-menu relevant to current mode Active Spot provides access to scroll and zoom functionsContent Orientation Content Navigation barclearly shows what node or item you linear view of contents within aare focusing on at any given time particular node
  16. 16. TAKE 1preliminary interface design focusing on theuser-scenerio of a design student
  17. 17. LOG-INSuzi identifies herself to the brainstorm book by her thumbprint. She touches an“active area” which glows white when her thumb hovers over or comes in contactwith it.
  18. 18. LOG-INWhen starting a new brainstorm, Suzi is prompted to enter a goal and a deadline. Thisinformation will help to focus the brainstorm and keep her on schedule.
  19. 19. LOG-INOur original idea was that a keyboard would become accessible simply by changingthe orientation of the book from horizontal to vertical.
  20. 20. LOG-INSuzi can then easily type in the required information. With each stroke, the key thatshe tapped reverses out to white to signify that the correct letters are being chosen.
  21. 21. INBOXThe brainstorm book is equipped with an Inbox which is closely related to e-mailapplications that we are all familiar with using. The Inbox provides the book with acomponent of mobility. Inspiration for a brainstorm can strike anywhere and when itdoes, one can easily snap a photo on a mobile device or even call the Inbox to leave avoice recording.
  22. 22. INBOXAfter logging in, Suzi taps on the word “Inbox” in the navigational toolbar that runsalong the top of the screen. Her messages appear in a gridded format—new messageson a white field and previously viewed messages on a gray field.
  23. 23. INBOXAt any point while logged into her book, Suzi can zoom in and out along the Z-axis.She does this by touching the “active spot” in the bottle center of her screen, whichwill then glow in response to her touch.
  24. 24. INBOXWhile her active spot is glowing, Suzi can then run her fingers up and down the spineof the book to zoom in or out.
  25. 25. INBOXWhile still touching the active spot, she can navigate around the grid of messages.She can adjust the view of messages being shown on the screen by dragging in anydirection until she hits the outer perimeter of the message grid.
  26. 26. INBOXIf she chooses to, Suzi can reverse her steps to get back to the original zoomed outview of her Inbox.
  27. 27. INBOXThis is a full-screen view of Suzi’s inbox, which is organized by date.
  28. 28. INBOXBy holding down on the active spot at the bottom center of the screen for a fewseconds and not touching anywhere else, a viewfinder tool will appear. These boxesrepresent the entire grid of messages in Suzi’s inbox.
  29. 29. INBOXThe white boxes represent the messages which currently appear on the screen. Bytouching, or touching and dragging, Suzi can activate singular or multiple messageselsewhere on the grid.
  30. 30. INBOXShe can use this tool to see her messages in a more holistic view or to alter the rangeof messages that appear on her screen. Once her selection is made, Suzi can releaseher hold on the active spot to return to her Inbox.
  31. 31. INBOXThe viewfinder will disappear and the Inbox will begin to transform to reflect thechanges that Suzi made.
  32. 32. INBOXThis is Suzi’s Inbox adjusted to the new view she chose in the viewfinder.
  33. 33. COLLECTCollect is the mode in which one can begin to input the material that will make upthe content of the brainstorm—both internal ideas and external inspiration. Thiscan be done through a variety of input devices. One can collect by typing, scanning,drawing, talking, browsing the web, uploading from external devices, recordingsound or video, or taking a photograph.
  34. 34. COLLECTSuzi can move to Collect mode by choosing it in the navigational toolbar. In this case,she moved to this mode by dragging a message from her Inbox to the word “Collect.”With at least one item on the screen, Expand and Share modes become available.
  35. 35. COLLECTSuzi chooses to input information by talking. She selects the word “Talk” and beginsspeaking. As she speaks sound waves corresponding to her voice, as well as thewritten version of the word she says, appear on the screen.
  36. 36. COLLECTWhen finished speaking, Suzi again taps the word “Talk” to return to Collect mode.Her voice recording shows up as a thumbnail next to her other collected material.
  37. 37. EXPANDExpand mode (now re-named to “Explore”) is the way in which the book can helpto jog one’s thoughts and generate more content for the brainstorm. Once an itemis chosen to expand upon, the book then pulls from a variety of internet sources togenerate words, links, images, videos, or a mix of random associations based on“tags” and information previously embedded in the item.
  38. 38. EXPANDIf Suzi is at a loss for other material to input, or just ready to move on to the next step,she can choose to continue to Expand mode.
  39. 39. EXPANDAll of the materials Suzi gathered in Collect mode appear on the screen, and shechooses one to expand upon.
  40. 40. EXPANDThen Suzi chooses a way in which she wants to expand upon her chosen item. In thiscase, she wants to expand through images.
  41. 41. EXPANDThe view adjusts so that the image Suzi wants to expand upon is displayed largely inthe middle of the screen. A row of images shows up in a gray bar along the bottom ofthe screen.
  42. 42. EXPANDSuzi can choose images that she wants to incorporate into her brainstorm bydragging them from the grey bar onto the large image that she is expanding upon.The outline of the center image thickens to indicate that it is being added on to.
  43. 43. EXPANDThe new photo shows up linked to the original image. The new photo shows upsmaller next to the one that was being expanded upon as a way of tracking thehistory of information inclusion (i.e. the little photo was found through the big one).
  44. 44. EXPANDSuzi can tap “Expand” to return to the main screen of that mode. This screen displaysher content in a linear manner, clearly showing which information was the originaland which was added through the Expand function.
  45. 45. CATALOGCatalog mode (now re-named to “Sort”) is the mode in which all the informationbegins to be organized. It can be sorted by subject, medium, date, or even color-coding if the user has chosen to include that layer of information. Additionally, in thismode the information is differentiated through levels of hierarchy. One can choose toplace emphasis on the strongest parts of the brainstorm with the most information,or the parts with the least information where gaps still remain to be filled.
  46. 46. CATALOGWhenever Suzi’s brainstorm contains multiple items, she is able to catalog them.
  47. 47. CATALOGShe must choose a way to sort her information before the option to arrange ithierarchically (the inactive options in black on the right side of her sub-toolbar)becomes available to her.
  48. 48. CATALOGAfter Suzi chooses to sort by medium, her information appears in different “bins.”There are currently only two bins because her brainstorm only contained twodifferent kinds of media—audio and images.
  49. 49. CATALOGNow that the bins are created, Suzi has the option to arrange them in a hierarchy.She chooses to place the most importance on the bin with the most information orcontent. The bin with two images comes in front of the bin with one audio file.
  50. 50. TAKE 2refined interface design focusing on theuser-scenerio of a Marine Infantry Officer
  51. 51. A FRESH PERSPECTIVE> From our initial study, we gained a much better understanding of the functionality of our book and decided to make a number of changes.> We decided to focus our next user-scenerio on a Marine Infantry Officer, whose mission is dramatically different from that of a design student. We wanted to understand how some one with a more structured task might be able to interact with our book.
  52. 52. EVOLUTION OF THE BOOK> We changed the names of certain modes (i.e. “Expand” to “Explore” and “Catalogue” to “Sort”) to aid in ease of use and understanding.> Seeing the need to add comments or record thoughts throughout all modes, we added a permanent addition to the navigational toolbar in the upper right-hand corner of the screen. Three new buttons allow the user to type, write, or record audio at any point in the brainstorm.> We created a new “Visualize” mode to view information holistically.> Many more changes were made within the modes themselves, which will be outlined through the progression of the next user-scenerio.
  53. 53. USMC Captain Shane Rosenthal serves as a superior to Marine Infantry OfficerMorgan Ritter, the subject of our user-scenerio.
  54. 54. original bins redesigned binsSORTCaptain Rosenthal’s interaction with the brainstorm book focuses on “Sort” mode.When planning a strategic mission, the Marine Corps follows a very specific processknown as METT-C. This is an acronym standing for “Mission,” “Enemy,” “Terrainand Weather,” “Troops and Fire Support,” and “Cultural Considerations.” CaptainRosenthal will create the necessary bins and include pieces of information to passalong to 2nd Lieutenant Ritter when he begins to plan his mission. In the evolution ofthe brainstorm book design, bins have taken on a much more visual form.
  55. 55. SORTThis is a full-screen view of the what Captain Rosenthal sees after collecting a fewpieces of information vital to the planning of 2nd Lieutenant Ritter’s mission.
  56. 56. SORTWhen he chooses to sort by “Subject,” a gray bar appears along the bottom of thescreen. When Captain Rosenthal taps the “plus” sign, an empty bin appears with alabel that reads “Title Here.”
  57. 57. SORTCaptain Rosenthal then selects the microphone icon in the top right-hand corner ofhis screen. He says out loud the preferred title of the new bin.
  58. 58. SORTAs he speaks, sound waves appear next to the microphone icon. The title of the newbin appears on the label in syllables as he speaks it.
  59. 59. SORTWhen he is done speaking, Captain Rosenthal taps the microphone icon again andthe newly created bin shrinks in its place in the “content viewer,” the gray bar at thebottom of the page.
  60. 60. SORTAny of the brainstorm’s content that falls under the category of the newly createdbin, leaves it place among the other content and disappears into the bin.
  61. 61. SORTOnce a bin contains at least one item, its appearance changes to reflect that it is nolonger empty.
  62. 62. SORTCaptain Rosenthal continues to create bins representing all five of the stages of theMETT-C planning process.
  63. 63. SORTThis is a full-screen view of all of the created bins, both those that are empty andthose with contents.
  64. 64. SHAREOne of the most important elements of a brainstorm is that it can be collaborative.In this case, Captain Rosenthal began a brainstorm which he will then pass on to 2ndLieutenant Morgan Ritter. Multiple people can log into one book at different times(by logging in with their own thumbprints), or can access existing brainstorms fromremote locations with their own books when someone chooses to share one.
  65. 65. SHAREWhen Captain Rosenthal chooses “Share,” the screen transitions into that mode.
  66. 66. SHAREOnce in “Share” mode, Captain Rosenthal is greeted with a list of contactsaccompanied by pictures.
  67. 67. SHARECaptain Rosenthal chooses to share by “Export.” A dialogue comes up prompting himto choose a contact to export to.
  68. 68. SHAREBy holding the “active spot”, Captain Rosenthal can scroll from left to right within hislist of contacts.
  69. 69. SHAREWhen he sees 2nd Lieutenant Morgan Ritter, he releases the active spot and is ableto select his photo.
  70. 70. SHAREThe border around the placeholder contact spot in the export dialogue box thickensto indicate that the contact can be dragged onto it.
  71. 71. SHAREWhen the contact is over the placeholder contact area, the thick outline turns greento indicate that the area is active and the contact can be dropped here.
  72. 72. SHARE2nd Lieutenant Morgan Ritter’s picture and contact information now show up in theexport dialogue.
  73. 73. SHAREWhen Captain Rosenthal chooses “Send,” another dialogue appears so that he canconfirm that he really wants to complete this action. This confirmation serves as anextra security feature.
  74. 74. SHAREAfter confirmation of his action, Captain Rosenthal sees a message informing himthat his brainstorm was sent successfully.
  75. 75. SHAREWhen he is finished, Captain Rosenthal simply closes the book. All of his informationis automatically saved.
  76. 76. When ready to plan his mission, 2nd Lieutenant Morgan Ritter sits down on a comfycouch in the living room of his barracks.
  77. 77. LOG-INHe logs into his USMC-issued brainstorm book with his thumbprint.
  78. 78. LOG-INWhen prompted to choose between a new or existing brainstorm, 2nd LieutenantRitter chooses “Open Existing” in order to continue on with the brainstorm thatCaptain Rosenthal already created.
  79. 79. LOG-INA list of existing missions to which he has access appear on the screen. He choosesthe mission recently created for him by Captain Rosenthal.
  80. 80. COLLECTCollect mode remains essential the same from the first version of the brainstormbook interface design. Its function is still to collect thoughts and ideas throughvarious means of input.
  81. 81. COLLECT2nd Lieutenant Ritter chooses to scan a map from a book he is reading.
  82. 82. COLLECTHe removes the “scan wand,” which is permanently stored within the confines of thebook and can be accessed by pulling it upwards from its position in the top right-handcorner.
  83. 83. COLLECT2nd Lieutenant Ritter activates the scan wand by holding it at a horizontalorientation to the material that he wants to input. He lifts the wand and taps once onthe desired scan.
  84. 84. COLLECTThe wand responds to the tap by glowing. This indicates that it is ready to scan.
  85. 85. COLLECT2nd Lieutenant Ritter can move the wand over the map that he wants to input. Thegreen glow trails behind the wand, indicating which information has been scanned.
  86. 86. COLLECTWhen finished scanning, 2nd Lieutenant Ritter returns the scan wand to its storedlocation, and his map begins to appear on the screen.
  87. 87. COLLECTHe selects the write icon in the top right-hand corner of his screen in order to makesome notes on the map.
  88. 88. COLLECTHe chooses a color which will show clearly on top of his scan.
  89. 89. COLLECT2nd Lieutenant Ritter can then draw and make notes on the scan, either with hisfingertips or by removing the scan wand and holding it vertically like a pen.
  90. 90. EXPLORE“Explore” mode has evolved a lot since the first interface of the design mode, when it was known as “Expand.” The item upon which one wants to expand will always appear in the “content navigator,” the gray bar along the bottom of the screen. The content being generated by the book during expand mode will take up the majority of the screen.
  91. 91. EXPLORE2nd Lieutenant Ritter chooses to explore additional content in relation to the map hescanned. He chooses “Links” so that the book will generate a list of websites relatingto the information embedded in his map.
  92. 92. EXPLOREWebsites appear front and center as individual pages.
  93. 93. EXPLOREAfter being displayed for a few seconds, each website flips back to take its placein an overall grid structure. The view of the site is now reduced to a headline. Morewebsites continue to populate the screen.
  94. 94. EXPLORELinks fill the page until 2nd Lieutenant Ritter is looking at them all holistically in anorganized grid structure. The different values of green represent the links in theirlevel of relevance to the map he wanted to expand upon.
  95. 95. EXPLOREBy hovering over different parts of the grid, 2nd Lieutenant Ritter is able to view thefull contents of the links.
  96. 96. EXPLOREHe is able to incorporate selected links into his brainstorm by dragging them to hiscontent navigation bar.
  97. 97. EXPLOREGetting deeper into his brainstorm, 2nd Lieutenant Ritter chooses to expand on thelink that he found by exploring websites related to the map he scanned. He decidesto explore in a more open-ended manner this time, through the “Scramble” function.
  98. 98. EXPLOREThe “Scramble” function shows 2nd Lieutenant Ritter a steady live stream ofwords, images, and video being posted on user-generated content sites all over theinternet, from around the world.
  99. 99. EXPLOREHe can watch the live feed in the “Scramble” function to get a cross-section of otherpeople’s thoughts around the world, in relation to the link he wants to explore.
  100. 100. EXPLOREOnce again, 2nd Lieutenant Ritter can choose to incorporate selected pieces into hisown brainstorm by dragging items to his content navigation bar.
  101. 101. SORTIn this case, Captain Rosenthal has already created the structure in “Sort” mode bycreating and labeling a series of bins that correspond to the METT-C planning process.2nd Lieutenant Ritter can now add his own content to the previously existing bins,view the bins and their entire content (added by both himself and Captain Rosenthal),and arrange the bins in a hierarchy.
  102. 102. SORTThe screen transitions into “Sort” mode and the content gathered by 2nd LieutenantRitter in “Collect” and “Explore” modes filter into the existing bins created by CaptainRosenthal.
  103. 103. SORTWhen 2nd Lieutenant Ritter wants to view the contents of a particular bin, he tapsit and it takes a position anchored at the bottom left corner of the screen. The otherbins slide off the screen to the right and the contents of the bin appear next to it.
  104. 104. SORTHe taps the bin again to return to a view of all the bins in the content navigation bar.After viewing the contents of some of the bins, 2nd Lieutenant Ritter chooses to adda level of hierarchy. He chooses to sort the bins by “Most Data.”
  105. 105. SORTThe bins arrange themselves according to which have the most content. In this case,the “Enemy” bin has the most items in it and therefore has the most emphasis.
  106. 106. VISUALIZEThe most important evolution in the brainstorm book interface design is the additionof a new “Visualize” mode. This mode serves as a means to view all of the contents ofthe brainstorm visually and in relationship to each other in terms of how they weregathered. The goal of “Visualize” mode is to view the contents of the brainstormholistically, rather than make edits. This mode consists of all the content shownin a flexible hierarchy, meaning that one can focus on different sections of thebrainstorm at a time.
  107. 107. VISUALIZEThe first layer of contents within a given bin reveal themselves first.
  108. 108. VISUALIZEAfter the first level of contents appears, secondary levels reveal themselves.Secondary levels of information are items that were found in “Explore” mode and getsmaller as they get more removed from the initial item of focus.
  109. 109. VISUALIZEThe other bins appear in a similar manner, and 2nd Lieutenant Ritter is able to scrollthrough the bins that radiate out from a center vanishing point at the top of thescreen. Flexible hierarchy is achieved by the ability to shift the focal view.
  110. 110. THANK YOUWith any questions, please contact:Channing Ritterritter.1402@osu.eduSuzi