Brainstorm Book

225
BRAINSTORMING IN THE LIVING ROOM an interactive user experience developed by Channing Ritter & Suzi Slavik

description

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

Transcript of Brainstorm Book

Page 1: Brainstorm Book

BRAINSTORMING IN THE LIVING ROOMan interactive user experiencedeveloped by Channing Ritter & Suzi Slavik

Page 2: Brainstorm Book

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

Page 3: Brainstorm Book

OPPORTUNITY & FOCUS> the living room as a space conducive to problem solving and

creative endeavors

Page 4: Brainstorm Book

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)

Page 5: Brainstorm Book

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

Page 6: Brainstorm Book

POTENTIAL USER #1DESIGN STUDENT> osu department of designsenior level

Page 7: Brainstorm Book

TOOLS > pen & paper:sketches, notes

> magazines:print, how, good, cmyk

> internet sources:youtube, ffffound, flickr

Page 8: Brainstorm Book

PROCESS> generating a list of interests and ambitions as they relate to the 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

Page 9: Brainstorm Book

POTENTIAL USER #2MARINE INFANTRY OFFICER> rifle platoon commander2nd lieutenant

Page 10: Brainstorm Book

afghanistan

Page 11: Brainstorm Book

PROCESSBAMCIS> Begin planning> Arrange reconaissance> Make reconaissance> Complete the plan> Issue the order> Supervise

METT-C> Mission> Enemy> Terrain and weather> Troops and fire support> Cultural considerations

Page 12: Brainstorm Book

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

Page 13: Brainstorm Book

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.

Page 14: Brainstorm Book

INITIAL LOOK INTO MODES & TYPES OF INTERACTIONS YOUR ACTIONS> MODE: COLLECTYou Need to Collect Your Sources.

-type it-scan it-draw it-record it (photo/video camera)-browse the web-upload files-highlight text or images-record with microphone

> MODE: EXPANDYou Need to Expand Your Ideas.You are Stuck.

-consult thesaurus-auto-generated list of related links-auto-generated list of related images-auto-generated list of related videos-use scramble device offering info like what’s happening now, around me, keywords, random etc.

> MODE: CATALOG You Need to Organize Your Input

-use auto-generated topics that you can use to sort your sources (ie color, subject, medium)-manually sort your input-highlight text or images-active state edit-use auto-scale categories by (less info, more info)-manual scaling(not static, z-axis)

> MODE: SHAREYou Need to Share Your Work

-email-export different file types-print preview-compare simultaneously to other brainstorms-offspring: your brainstorm merges with another brainstorm producing a baby

> MODE: MOBILE ACCESSYou Need to Input Information on the Go

-from your phone, call and leave messages, texts, pictures, etc-from a computer,

-call/text from phone-remote access via email/ip address?

> NAVIGATE-focus in/out -rollover magnify

Page 15: Brainstorm Book

BOOK FORMAT Primary Navigational Toolbarmeans of moving within different modes

Secondary Navigational Toolbarsub-menu relevant to current mode

Content Orientationclearly shows what node or item you are focusing on at any given time

Active Spotprovides access to scroll and zoom functions

Content Navigation barlinear view of contents within a particular node

Page 16: Brainstorm Book

TAKE 1preliminary interface design focusing on the user-scenerio of a design student

Page 17: Brainstorm Book

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 contact with it.

Page 18: Brainstorm Book

LOG-INWhen starting a new brainstorm, Suzi is prompted to enter a goal and a deadline. This information will help to focus the brainstorm and keep her on schedule.

Page 19: Brainstorm Book

LOG-INOur original idea was that a keyboard would become accessible simply by changing the orientation of the book from horizontal to vertical.

Page 20: Brainstorm Book

LOG-INSuzi can then easily type in the required information. With each stroke, the key that she tapped reverses out to white to signify that the correct letters are being chosen.

Page 21: Brainstorm Book

INBOXThe brainstorm book is equipped with an Inbox which is closely related to e-mail applications that we are all familiar with using. The Inbox provides the book with a component of mobility. Inspiration for a brainstorm can strike anywhere and when it does, one can easily snap a photo on a mobile device or even call the Inbox to leave a voice recording.

Page 22: Brainstorm Book

INBOXAfter logging in, Suzi taps on the word “Inbox” in the navigational toolbar that runs along the top of the screen. Her messages appear in a gridded format—new messages on a white field and previously viewed messages on a gray field.

Page 23: Brainstorm Book

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, which will then glow in response to her touch.

Page 24: Brainstorm Book

INBOXWhile her active spot is glowing, Suzi can then run her fingers up and down the spine of the book to zoom in or out.

Page 25: Brainstorm Book

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 any direction until she hits the outer perimeter of the message grid.

Page 26: Brainstorm Book
Page 27: Brainstorm Book
Page 28: Brainstorm Book
Page 29: Brainstorm Book

INBOXIf she chooses to, Suzi can reverse her steps to get back to the original zoomed out view of her Inbox.

Page 30: Brainstorm Book

INBOXThis is a full-screen view of Suzi’s inbox, which is organized by date.

Page 31: Brainstorm Book

INBOXBy holding down on the active spot at the bottom center of the screen for a few seconds and not touching anywhere else, a viewfinder tool will appear. These boxes represent the entire grid of messages in Suzi’s inbox.

Page 32: Brainstorm Book

INBOXThe white boxes represent the messages which currently appear on the screen. By touching, or touching and dragging, Suzi can activate singular or multiple messages elsewhere on the grid.

Page 33: Brainstorm Book
Page 34: Brainstorm Book

INBOXShe can use this tool to see her messages in a more holistic view or to alter the range of messages that appear on her screen. Once her selection is made, Suzi can release her hold on the active spot to return to her Inbox.

Page 35: Brainstorm Book

INBOXThe viewfinder will disappear and the Inbox will begin to transform to reflect the changes that Suzi made.

Page 36: Brainstorm Book
Page 37: Brainstorm Book
Page 38: Brainstorm Book

INBOXThis is Suzi’s Inbox adjusted to the new view she chose in the viewfinder.

Page 39: Brainstorm Book

COLLECTCollect is the mode in which one can begin to input the material that will make up the content of the brainstorm—both internal ideas and external inspiration. This can be done through a variety of input devices. One can collect by typing, scanning, drawing, talking, browsing the web, uploading from external devices, recording sound or video, or taking a photograph.

Page 40: Brainstorm Book

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.

Page 41: Brainstorm Book

COLLECTSuzi chooses to input information by talking. She selects the word “Talk” and begins speaking. As she speaks sound waves corresponding to her voice, as well as the written version of the word she says, appear on the screen.

Page 42: Brainstorm Book
Page 43: Brainstorm Book
Page 44: Brainstorm Book
Page 45: Brainstorm Book

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.

Page 46: Brainstorm Book

EXPANDExpand mode (now re-named to “Explore”) is the way in which the book can help to jog one’s thoughts and generate more content for the brainstorm. Once an item is chosen to expand upon, the book then pulls from a variety of internet sources to generate words, links, images, videos, or a mix of random associations based on “tags” and information previously embedded in the item.

Page 47: Brainstorm Book

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.

Page 48: Brainstorm Book

EXPANDAll of the materials Suzi gathered in Collect mode appear on the screen, and she chooses one to expand upon.

Page 49: Brainstorm Book

EXPANDThen Suzi chooses a way in which she wants to expand upon her chosen item. In this case, she wants to expand through images.

Page 50: Brainstorm Book

EXPANDThe view adjusts so that the image Suzi wants to expand upon is displayed largely in the middle of the screen. A row of images shows up in a gray bar along the bottom of the screen.

Page 51: Brainstorm Book

EXPANDSuzi can choose images that she wants to incorporate into her brainstorm by dragging 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.

Page 52: Brainstorm Book

EXPANDThe new photo shows up linked to the original image. The new photo shows up smaller next to the one that was being expanded upon as a way of tracking the history of information inclusion (i.e. the little photo was found through the big one).

Page 53: Brainstorm Book

EXPANDSuzi can tap “Expand” to return to the main screen of that mode. This screen displays her content in a linear manner, clearly showing which information was the original and which was added through the Expand function.

Page 54: Brainstorm Book

CATALOGCatalog mode (now re-named to “Sort”) is the mode in which all the information begins 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 this mode the information is differentiated through levels of hierarchy. One can choose to place 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.

Page 55: Brainstorm Book

CATALOGWhenever Suzi’s brainstorm contains multiple items, she is able to catalog them.

Page 56: Brainstorm Book

CATALOGShe must choose a way to sort her information before the option to arrange it hierarchically (the inactive options in black on the right side of her sub-toolbar)becomes available to her.

Page 57: Brainstorm Book

CATALOGAfter Suzi chooses to sort by medium, her information appears in different “bins.” There are currently only two bins because her brainstorm only contained two different kinds of media—audio and images.

Page 58: Brainstorm Book

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 or content. The bin with two images comes in front of the bin with one audio file.

Page 59: Brainstorm Book

TAKE 2refined interface design focusing on the user-scenerio of a Marine Infantry Officer

Page 60: Brainstorm Book

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.

Page 61: Brainstorm Book

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.

Page 62: Brainstorm Book

USMC Captain Shane Rosenthal serves as a superior to Marine Infantry Officer Morgan Ritter, the subject of our user-scenerio.

Page 63: Brainstorm Book

SORTCaptain Rosenthal’s interaction with the brainstorm book focuses on “Sort” mode. When planning a strategic mission, the Marine Corps follows a very specific process known as METT-C. This is an acronym standing for “Mission,” “Enemy,” “Terrain and Weather,” “Troops and Fire Support,” and “Cultural Considerations.” Captain Rosenthal will create the necessary bins and include pieces of information to pass along to 2nd Lieutenant Ritter when he begins to plan his mission. In the evolution of the brainstorm book design, bins have taken on a much more visual form.

original bins redesigned bins

Page 64: Brainstorm Book

SORTThis is a full-screen view of the what Captain Rosenthal sees after collecting a few pieces of information vital to the planning of 2nd Lieutenant Ritter’s mission.

Page 65: Brainstorm Book

SORTWhen he chooses to sort by “Subject,” a gray bar appears along the bottom of the screen. When Captain Rosenthal taps the “plus” sign, an empty bin appears with a label that reads “Title Here.”

Page 66: Brainstorm Book

SORTCaptain Rosenthal then selects the microphone icon in the top right-hand corner of his screen. He says out loud the preferred title of the new bin.

Page 67: Brainstorm Book

SORTAs he speaks, sound waves appear next to the microphone icon. The title of the new bin appears on the label in syllables as he speaks it.

Page 68: Brainstorm Book

SORTWhen he is done speaking, Captain Rosenthal taps the microphone icon again and the newly created bin shrinks in its place in the “content viewer,” the gray bar at the bottom of the page.

Page 69: Brainstorm Book

SORTAny of the brainstorm’s content that falls under the category of the newly created bin, leaves it place among the other content and disappears into the bin.

Page 70: Brainstorm Book
Page 71: Brainstorm Book

SORTOnce a bin contains at least one item, its appearance changes to reflect that it is no longer empty.

Page 72: Brainstorm Book

SORTCaptain Rosenthal continues to create bins representing all five of the stages of the METT-C planning process.

Page 73: Brainstorm Book
Page 74: Brainstorm Book
Page 75: Brainstorm Book
Page 76: Brainstorm Book
Page 77: Brainstorm Book
Page 78: Brainstorm Book
Page 79: Brainstorm Book
Page 80: Brainstorm Book
Page 81: Brainstorm Book
Page 82: Brainstorm Book

SORTThis is a full-screen view of all of the created bins, both those that are empty and those with contents.

Page 83: Brainstorm Book

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 2nd Lieutenant Morgan Ritter. Multiple people can log into one book at different times (by logging in with their own thumbprints), or can access existing brainstorms from remote locations with their own books when someone chooses to share one.

Page 84: Brainstorm Book

SHAREWhen Captain Rosenthal chooses “Share,” the screen transitions into that mode.

Page 85: Brainstorm Book
Page 86: Brainstorm Book
Page 87: Brainstorm Book

SHAREOnce in “Share” mode, Captain Rosenthal is greeted with a list of contacts accompanied by pictures.

Page 88: Brainstorm Book

SHARECaptain Rosenthal chooses to share by “Export.” A dialogue comes up prompting him to choose a contact to export to.

Page 89: Brainstorm Book

SHAREBy holding the “active spot”, Captain Rosenthal can scroll from left to right within his list of contacts.

Page 90: Brainstorm Book
Page 91: Brainstorm Book
Page 92: Brainstorm Book
Page 93: Brainstorm Book
Page 94: Brainstorm Book
Page 95: Brainstorm Book

SHAREWhen he sees 2nd Lieutenant Morgan Ritter, he releases the active spot and is able to select his photo.

Page 96: Brainstorm Book

SHAREThe border around the placeholder contact spot in the export dialogue box thickens to indicate that the contact can be dragged onto it.

Page 97: Brainstorm Book

SHAREWhen the contact is over the placeholder contact area, the thick outline turns green to indicate that the area is active and the contact can be dropped here.

Page 98: Brainstorm Book

SHARE2nd Lieutenant Morgan Ritter’s picture and contact information now show up in the export dialogue.

Page 99: Brainstorm Book
Page 100: Brainstorm Book

SHAREWhen Captain Rosenthal chooses “Send,” another dialogue appears so that he can confirm that he really wants to complete this action. This confirmation serves as an extra security feature.

Page 101: Brainstorm Book
Page 102: Brainstorm Book

SHAREAfter confirmation of his action, Captain Rosenthal sees a message informing him that his brainstorm was sent successfully.

Page 103: Brainstorm Book

SHAREWhen he is finished, Captain Rosenthal simply closes the book. All of his information is automatically saved.

Page 104: Brainstorm Book

When ready to plan his mission, 2nd Lieutenant Morgan Ritter sits down on a comfy couch in the living room of his barracks.

Page 105: Brainstorm Book

LOG-INHe logs into his USMC-issued brainstorm book with his thumbprint.

Page 106: Brainstorm Book
Page 107: Brainstorm Book
Page 108: Brainstorm Book

LOG-INWhen prompted to choose between a new or existing brainstorm, 2nd Lieutenant Ritter chooses “Open Existing” in order to continue on with the brainstorm that Captain Rosenthal already created.

Page 109: Brainstorm Book
Page 110: Brainstorm Book
Page 111: Brainstorm Book
Page 112: Brainstorm Book

LOG-INA list of existing missions to which he has access appear on the screen. He chooses the mission recently created for him by Captain Rosenthal.

Page 113: Brainstorm Book
Page 114: Brainstorm Book
Page 115: Brainstorm Book
Page 116: Brainstorm Book
Page 117: Brainstorm Book
Page 118: Brainstorm Book
Page 119: Brainstorm Book
Page 120: Brainstorm Book

COLLECTCollect mode remains essential the same from the first version of the brainstorm book interface design. Its function is still to collect thoughts and ideas through various means of input.

Page 121: Brainstorm Book

COLLECT2nd Lieutenant Ritter chooses to scan a map from a book he is reading.

Page 122: Brainstorm Book

COLLECTHe removes the “scan wand,” which is permanently stored within the confines of the book and can be accessed by pulling it upwards from its position in the top right-hand corner.

Page 123: Brainstorm Book
Page 124: Brainstorm Book
Page 125: Brainstorm Book
Page 126: Brainstorm Book

COLLECT2nd Lieutenant Ritter activates the scan wand by holding it at a horizontal orientation to the material that he wants to input. He lifts the wand and taps once on the desired scan.

Page 127: Brainstorm Book
Page 128: Brainstorm Book

COLLECTThe wand responds to the tap by glowing. This indicates that it is ready to scan.

Page 129: Brainstorm Book

COLLECT2nd Lieutenant Ritter can move the wand over the map that he wants to input. The green glow trails behind the wand, indicating which information has been scanned.

Page 130: Brainstorm Book
Page 131: Brainstorm Book
Page 132: Brainstorm Book

COLLECTWhen finished scanning, 2nd Lieutenant Ritter returns the scan wand to its stored location, and his map begins to appear on the screen.

Page 133: Brainstorm Book
Page 134: Brainstorm Book
Page 135: Brainstorm Book
Page 136: Brainstorm Book
Page 137: Brainstorm Book

COLLECTHe selects the write icon in the top right-hand corner of his screen in order to make some notes on the map.

Page 138: Brainstorm Book
Page 139: Brainstorm Book

COLLECTHe chooses a color which will show clearly on top of his scan.

Page 140: Brainstorm Book

COLLECT2nd Lieutenant Ritter can then draw and make notes on the scan, either with his fingertips or by removing the scan wand and holding it vertically like a pen.

Page 141: Brainstorm Book
Page 142: Brainstorm Book
Page 143: Brainstorm Book
Page 144: Brainstorm Book
Page 145: Brainstorm Book
Page 146: Brainstorm Book
Page 147: Brainstorm Book
Page 148: Brainstorm Book
Page 149: Brainstorm Book

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.

Page 150: Brainstorm Book

EXPLORE2nd Lieutenant Ritter chooses to explore additional content in relation to the map he scanned. He chooses “Links” so that the book will generate a list of websites relating to the information embedded in his map.

Page 151: Brainstorm Book
Page 152: Brainstorm Book
Page 153: Brainstorm Book
Page 154: Brainstorm Book

EXPLOREWebsites appear front and center as individual pages.

Page 155: Brainstorm Book
Page 156: Brainstorm Book
Page 157: Brainstorm Book

EXPLOREAfter being displayed for a few seconds, each website flips back to take its place in an overall grid structure. The view of the site is now reduced to a headline. More websites continue to populate the screen.

Page 158: Brainstorm Book
Page 159: Brainstorm Book
Page 160: Brainstorm Book
Page 161: Brainstorm Book

EXPLORELinks fill the page until 2nd Lieutenant Ritter is looking at them all holistically in an organized grid structure. The different values of green represent the links in their level of relevance to the map he wanted to expand upon.

Page 162: Brainstorm Book
Page 163: Brainstorm Book

EXPLOREBy hovering over different parts of the grid, 2nd Lieutenant Ritter is able to view the full contents of the links.

Page 164: Brainstorm Book
Page 165: Brainstorm Book

EXPLOREHe is able to incorporate selected links into his brainstorm by dragging them to his content navigation bar.

Page 166: Brainstorm Book
Page 167: Brainstorm Book
Page 168: Brainstorm Book
Page 169: Brainstorm Book
Page 170: Brainstorm Book

EXPLOREGetting deeper into his brainstorm, 2nd Lieutenant Ritter chooses to expand on the link that he found by exploring websites related to the map he scanned. He decides to explore in a more open-ended manner this time, through the “Scramble” function.

Page 171: Brainstorm Book

EXPLOREThe “Scramble” function shows 2nd Lieutenant Ritter a steady live stream of words, images, and video being posted on user-generated content sites all over the internet, from around the world.

Page 172: Brainstorm Book
Page 173: Brainstorm Book
Page 174: Brainstorm Book
Page 175: Brainstorm Book
Page 176: Brainstorm Book
Page 177: Brainstorm Book
Page 178: Brainstorm Book
Page 179: Brainstorm Book
Page 180: Brainstorm Book
Page 181: Brainstorm Book
Page 182: Brainstorm Book
Page 183: Brainstorm Book
Page 184: Brainstorm Book
Page 185: Brainstorm Book
Page 186: Brainstorm Book
Page 187: Brainstorm Book
Page 188: Brainstorm Book

EXPLOREHe can watch the live feed in the “Scramble” function to get a cross-section of other people’s thoughts around the world, in relation to the link he wants to explore.

Page 189: Brainstorm Book

EXPLOREOnce again, 2nd Lieutenant Ritter can choose to incorporate selected pieces into his own brainstorm by dragging items to his content navigation bar.

Page 190: Brainstorm Book
Page 191: Brainstorm Book
Page 192: Brainstorm Book
Page 193: Brainstorm Book
Page 194: Brainstorm Book
Page 195: Brainstorm Book

SORTIn this case, Captain Rosenthal has already created the structure in “Sort” mode by creating 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.

Page 196: Brainstorm Book
Page 197: Brainstorm Book
Page 198: Brainstorm Book
Page 199: Brainstorm Book

SORTThe screen transitions into “Sort” mode and the content gathered by 2nd Lieutenant Ritter in “Collect” and “Explore” modes filter into the existing bins created by Captain Rosenthal.

Page 200: Brainstorm Book
Page 201: Brainstorm Book
Page 202: Brainstorm Book
Page 203: Brainstorm Book
Page 204: Brainstorm Book

SORTWhen 2nd Lieutenant Ritter wants to view the contents of a particular bin, he taps it and it takes a position anchored at the bottom left corner of the screen. The other bins slide off the screen to the right and the contents of the bin appear next to it.

Page 205: Brainstorm Book
Page 206: Brainstorm Book
Page 207: Brainstorm Book

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 add a level of hierarchy. He chooses to sort the bins by “Most Data.”

Page 208: Brainstorm Book
Page 209: Brainstorm Book
Page 210: Brainstorm Book
Page 211: Brainstorm Book
Page 212: Brainstorm Book

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.

Page 213: Brainstorm Book

VISUALIZEThe most important evolution in the brainstorm book interface design is the addition of a new “Visualize” mode. This mode serves as a means to view all of the contents of the brainstorm visually and in relationship to each other in terms of how they were gathered. The goal of “Visualize” mode is to view the contents of the brainstorm holistically, rather than make edits. This mode consists of all the content shown in a flexible hierarchy, meaning that one can focus on different sections of the brainstorm at a time.

Page 214: Brainstorm Book
Page 215: Brainstorm Book
Page 216: Brainstorm Book
Page 217: Brainstorm Book
Page 218: Brainstorm Book

VISUALIZEThe first layer of contents within a given bin reveal themselves first.

Page 219: Brainstorm Book
Page 220: Brainstorm Book
Page 221: Brainstorm Book
Page 222: Brainstorm Book

VISUALIZEAfter the first level of contents appears, secondary levels reveal themselves. Secondary levels of information are items that were found in “Explore” mode and get smaller as they get more removed from the initial item of focus.

Page 223: Brainstorm Book
Page 224: Brainstorm Book

VISUALIZEThe other bins appear in a similar manner, and 2nd Lieutenant Ritter is able to scroll through the bins that radiate out from a center vanishing point at the top of the screen. Flexible hierarchy is achieved by the ability to shift the focal view.

Page 225: Brainstorm Book

THANK YOUWith any questions, please contact:

Channing [email protected]

Suzi [email protected]