brainstorm book

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

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

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

creative endeavors

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)

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

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

TOOLS > pen & paper:sketches, notes

> magazines:print, how, good, cmyk

> internet sources:youtube, ffffound, flickr

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

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

afghanistan

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

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

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.

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

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

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

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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).

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.

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.

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

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.

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.

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.

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

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.

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.

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

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

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.

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.”

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.

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.

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.

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.

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

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

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

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.

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

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

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

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

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

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

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.

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

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.

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

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

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

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

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.

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.

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.

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

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.

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.

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

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.

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

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

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

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.

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.

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.

EXPLOREWebsites appear front and center as individual pages.

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.

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.

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

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

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.

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.

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.

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

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.

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.

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.

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.”

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.

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.

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

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.

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.

THANK YOUWith any questions, please contact:

Channing Ritterritter.1402@osu.edu

Suzi Slavikslavik.9@osu.edu