Compendium: The Dunwich Horror Application Interaction Desgin and wireframe Document. Document Created By: Nancy Yu Wen Sun Date: June 18th 2010
Design Guide 1 interactive element per chapter. Sleep mode when user leaves the app for a extensive amount of time.
Requiremnt Book Index Bookmark Navigation tool * Font size * Search bar * Positive and negative alteration
Game Reward after all chapter Chapter 10 depends on completion of all chapters
Questions Are we creating a book experience as priority or game experience? Does the index need to be restricted? If restricted: Force the user to use it chronologically Defeats the purpose of an index Can be used as a bookmark
If not restricted: Allows the user to enjoy just the games freely. (Needs to gray out chapter 9 or 10 so the user won’t be confused) serviced the index as a tool Encourage a non-linear experience, not chronologically
Page
Dunwich Horror:
Universal function within site Actions
Site Structure
Actions apply to all chapters Start and End
Starts Cover
Chapter short cuts will appear in index. Index
Movie
Unlock the link once all the chapter is played
End
2
3.1 Bird eats soul (Bird eats all the letters of SOUL, and user gets a symbol)
Chapter 2 3.2 User has to light the candle with the matches for the symbol to appear.
7
Reset all the history to the original state so the user can experience the story again.
1
Book Mark 6.1
Chapter 1
Reset
Chapter 3 3.3 Look for the branded symbol mark on the cow in the group.
When Closing the Application. The Application remember where the user left off.
Chapter 4
Dunwich Landscape 6.2
Chapter 5 3.4
You hear a song and you have to replay it. Example: There is a fire with trees around it, The trees make a sound (Replay the song, Get a symbol)
Chapter 6 3.5
An important date is within the text of the chapter. Use the dial to input that date for the symbol to appear.
3.6 Pin all the body parts together for the symbol to appear.
Inventory Where all the symbols are stored when found in each chapter.
5
When user leave the page alone for over X min, vines grows and turn into landscape
Chapter 7 3.7 Destroy the forest by shaking the ipad hard to get a symbol
Chapter 8
Chapter 9 3.8
Card with holes, find all the words and you get a symbol. To know how to place the cards reference stain marks.
Info and Hints 6 Provide a two line hints for each chapter’s game.
3D Monster
3.9 Use the invisible monster to destroy the villages on the page.
4
Chapter 10 3.10 On a star wheel you place the 9 symbols you have received throughout your experience to unlock the 10th and final symbol, and you will unlock the 3D monster
Design Grid 768 px
192 px
The Grid display will be the main design frame for the graphics. 128 px
Icon Index Horizontal Grid
Vertical Grid
1024 px
Universal Stationary Area
Interactive Are a
Stationary Graphic
Interactive Graphic (Reacts to Interactive Object)
Interactive Object (Moveable)
Button
768 px
Overall Magazine Tool Bar
192 px 64 px 128 px
640 px
The Magazine tool bar will be the overall control of the application which will not be defined in this document.
Text Box 1024 px
The text box is the set region for the original “Dunwich Horror� text display.
830 px
Navigation Tool The Navigation Tool Bar is the page selector for the user to go through the pages. This control will hide when the user is reading the text or playing mini games. Only when the user tap the displayed region (image on the left) does the navigation tool bar appears. 6.1.1
Page number display Display the number of pages in 5-page increments.
6.1.2
Current page display The page button display glows.
6.1.3
Page Choice display The page buttons display dim.
6.1.4
Before and after display display When clicking on this region, the display of pages up and down will appear. Activate the page turns by SWIPE. SWIPE from Left to Right will go to previous pages SWIPE from Right to Left will go to next pages
Example:
6.1
6.1
.1
.2
6.1
6.1
.4
.3 pg 39
pg 35 384 px
32 px
Index Page 1.1
1.2
1.1
1.3
1.2 1.3 1.4
1.4
1.5
1.5 1.6 1.7
1.6
1.7
1.8 1.9 1.10
1.8
1.9
1.11 1.12
1.10
1.11
1.12
Movie
ON CLICK go to movie page.
Chapter 1 ON CLICK go to Chapter 1. Chapter 2 ON CLICK go to Chapter 2. Chapter 3 ON CLICK go to Chapter 3. Chapter 4 ON CLICK go to Chapter 4. Chapter 5 ON CLICK go to Chapter 5. Chapter 6 ON CLICK go to Chapter 6. Chapter 7 ON CLICK go to Chapter 7. Chapter 8
ON CLICK go to Chapter 8.
Chapter 9 ON CLICK go to Chapter 9. Chapter 10 ON CLICK go to Chapter 10. 3D Monster (hidden) The button graphic should display sealed before the chapters are completed. Display only when all the chapters completed. ON CLICK go to 3D Monster.
Chapter 1
768 px
192 px
3.1.1 3.1.2
3.1.1
Active Area The interactive area where the objects can dragged around within the boundary.
3.1.2
Bird
3.1.3
Word S DRAG AND DROP to the Bird (3.1.2).
3.1.4
Word O DRAG AND DROP to the Bird (3.1.2) only after Word S (3.1.3).
3.1.5
Word U DRAG AND DROP to the Bird (3.1.2) only after Word O (3.1.3).
128 px
640 px
3.1.3
3.1.4
1024 px
3.1.5
After DRAG AND DROP all the Words (3.1.3 - 3.1.6) into Bird, the Bird will display Symbol 1 (3.1.7).
768 px
192 px
128 px
830 px
3.1.6 3.1.6 3.1.7
Word L DRAG AND DROP to the Bird (3.1.2) only after Word U (3.1.3).
3.1.2
3.1.7
Symbol 1 APPEAR only after all the Words (3.1.3- 3.1.5) were DRAG AND DROPPED into the Bird (3.1.2).
3.1.3
640 px
1024 px
830 px
After APPEARING for 2 sec the Symbol is stored into Inventory Page.
32 px
32 px
Chapter 2
768 px
3.2.1
192 px
3.2.1
Active Area The interactive area where the objects can dragged around within the boundary.
3.2.2
Candle Wick The Candle Wick emits smoke. When a lit Match (3.2.3) is DRAGGED the Candle Wick will light up and Symbol 2 (3.2.4) will display.
3.2.3
Match
3.2.4
Match Box
128 px 640 px
The Match will be lit when DRAGGED in FAST MOTION on top of Match Box (3.2.4). The Match will emit smoke after 10 SEC.
Stationary Image that has a interactive area to LIGHT the Match.
1024 px
768 px
192 px
128 px 640 px
3.2.2
3.2.5
830 px
Symbol 2 APPEAR only the Match (3.2.3) is DRAGGED to light the Candle Wick (3.2.2). After APPEARING for 2 sec the Symbol is stored into Inventory Page.
3.2.5
1024 px
830 px
3.2.3 3.2.4
32 px
32 px
Chapter 4
768 px
640 px
192 px
3.4.1
Active Area The interactive area where the objects can dragged around within the boundary.
3.4.2
Start / Restart Button ON CLICK start the game. ON CLICK Restart the game.
3.4.3
Trees
3.4.4
Symbol 4 APPEAR only after the correct sequence of Tree Glow is CLICKED.
128 px
3.4.2
3.4.3
3.4.1 1024 px
The Trees will Glow and make a Musical Note. CLICK the Trees’ Glow sequence.
After APPEARING for 2 sec the Symbol is stored into Inventory Page.
768 px
192 px
128 px
830 px
640 px
1024 px
830 px
3.4.4
32 px
32 px
Chapter 5
768 px
192 px
3.5.1 128 px
3.5.1
Active Area The interactive area where the objects can dragged around within the boundary.
3.5.2
Year Dial Show different Years. ROTATE by DRAGGING to line up with the Marker (3.5.5)
3.5.3
Month Dial Show different Months. ROTATE by DRAGGING to line up with the Marker (3.5.5).
3.5.4
Date Dial Show different Dates. ROTATE by DRAGGING to line up with the Marker (3.5.5).
3.5.5
Marker Line up the Year (3.5.2), Month (3.5.3), and Date (3.5.4).
640 px
3.5.2
3.5
.5
1024 px
3.5.4
830 px
3.5.3
3.5.6
768 px
192 px
128 px 640 px
Symbol 5 APPEARS after all the correct Year, Month, and Date is aligned with the Marker (3.5.5). After APPEARING for 2 sec the Symbol is stored into Inventory Page.
1024 px
3.5.6 830 px
32 px
32 px
Chapter 8
768 px
192 px
3.8.1
3.8.1
Active Area The interactive area where the objects can be dragged around within the boundary.
3.8.2
Card
3.8.2
Card Hole The Card Holes FILL UP with Words when each Card Stain (3.8.3) is MATCHED with Page Stain (3.8.4).
3.8.3
Card Stain Matches with the Page Stain (3.8.4).
128 px 640 px
3.8.4
1024 px
3.8.2
3.8.2
830 px
3.8.3
DRAG to place to Card on the pages. ROTATE the Card to page the Card Stain (3.8.3) with Page Stain(3.8.4) When Page is TURNED the Card is SURFACED on top and can be used in the Next Page. On the Last Page of Chapter 8 The Card STAYS with the Page.
3.8.4
Page Stain Matches with the Card Stain (3.8.3).
3.8.5
Symbol 8 APPEAR when all the Card Hole (3.8.2) are FILLED After APPEARING for 2 sec the Symbol is stored into Inventory Page.
768 px
192 px
128 px 640 px
1024 px
3.8.5 830 px
32 px
32 px
Chapter 10 768 px
192 px
3.10.1
Active Area The interactive area where the objects can dragged around within the boundary.
3.10.2
Symbols Interactive Area The Interactive Area to DRAG AND DROP Symbols(3.10.3) from Inventory (5).
3.10.3
Symbols 1-9 DRAG AND DROP from Inventory (5) or Page to Place at the RIGHT Symbols Area (3.10.2). When DRAG AND DROP to the WRONG Symbol Area (3.10.2) the Symbol STAYS on the Page.
3.10.4
Symbol 10 APPEAR when all the 9 Symbols (3.10.3) are PLACED CORRECTLY. ON CLICK Placed to the last Symbol Interactive Area (3.10.2)
3.10.1 128 px 640 px
3.10.2
768 px
192 px
1024 px 128 px 640 px
830 px
3.10.3
1024 px
3.1
0.4 830 px
32 px
32 px
Inventory Button
768 px
192 px
5
Gray Box for Inventory Button display.
5.1
Inventory Button. ON CLICK, Opens Inventory Pop Box
6.3
Page Scroller
128 px
1024 px
5.1 50 px
5 6.3
130 px 64 px 32 px
Inventory: Grid style
5.2
5.1
5.5
5.4
6.3
5.1
Inventory Background
5.2
Symbols
5.3
Upper Tool Bar
5.4
Index Button
5.5
Movie Button
6.3
Page Scroller