Compendium: The Dunwich Horror Application Interaction Desgin and wireframe Document.

Document Created By: Nancy Yu Wen SunDate: June 18th 2010

Design Guide

1 interactive element per chapter.Sleep mode when user leaves the app for a extensive amount of time.

IndexBookmarkNavigation tool* Font size* Search bar* Positive and negative alteration

If restricted:Force the user to use it chronologicallyDefeats the purpose of an indexCan 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 toolEncourage a non-linear experience, not chronologically

Does the index need to be restricted?

Are we creating a book experience as priority or game experience?

Reward after all chapterChapter 10 depends on completion of all chapters

Book Game

Requiremnt

Questions

Index

Reset

Movie

3D Monster

Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5

Book MarkDunwich

Landscape

Chapter 6 Chapter 7 Chapter 8 Chapter 9 Chapter 10

Inventory Info and Hints

Cover

Dunwich Horror: Site Structure

Unlock the link once all the chapter is played

Chapter short cuts will appear in index.

Where all the symbols are stored when found in each chapter.

Provide a two line hints for each chapter’s game.

Reset all the history to the original state so the user can experience the story again.

When Closing the Application. The Application remember where the user left off.

When user leave the page alone for over X min, vines grows and turn into landscape

Bird eats soul (Bird eats all the letters of SOUL, and user gets a symbol)

On a star wheel you place the 9 symbols you have received throughout your ex-perience to unlock the 10th and final symbol, and you will unlock the 3D monster

User has to light the candle with the matches for the symbol to appear.

Look for the branded symbol mark on the cow in the group.

Pin all the body parts together for the symbol to appear.

An important date is within the text of the chapter. Use the dial to input that date for the symbol to appear.

Card with holes, find all the words and you get a symbol.To know how to place the cards reference stain marks.

Use the invisible monster to destroy the villages on the page.

Destroy the forest by shaking the ipad hard to get a symbol

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)

Starts

End

Start and End

Actions apply to all chapters

Actions

Universal function within site

Page

1

7

2

3.1 3.2 3.3

5 6

6.26.1

3.4 3.5 3.6 3.7 3.8 3.9 3.10

4

768 px

1024 px

192 px

128 px

Horizontal Grid

Vertical Grid

Universal Stationary Area

Stationary Graphic

Interactive Graphic (Reacts to Interactive Object)

Interactive Object (Moveable)

Button

Interactive Are a

Design Grid

Icon Index

The Grid display will be the main design frame for the graphics.

768 px

1024 px

192 px

128 px

640 px

830 px

64 px

Overall Magazine Tool Bar

The Magazine tool bar will be the overall control of the application which will not be defined in this document.

Text Box

The text box is the set region for the original “Dunwich Horror” text display.

32 px

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

Example:

pg 35 pg 39

6.1.1

6.1.2

6.1.3

6.1.4

6.1.26.1.3

6.1.46.1.1

Page number displayDisplay the number of pages in 5-page increments.

The page button display glows.

The page buttons display dim.

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 pagesSWIPE from Right to Left will go to next pages

Current page display

Page Choice display

Before and after display display

Index Page

1.1

1.2

1.3

1.4

1.5

1.6

1.7

1.8

1.9

1.10

1.11

1.12

MovieON CLICK go to movie page.

ON CLICK go to Chapter 1.

ON CLICK go to Chapter 2.

ON CLICK go to Chapter 3.

ON CLICK go to Chapter 4.

ON CLICK go to Chapter 5.

ON CLICK go to Chapter 6.

ON CLICK go to Chapter 7.

ON CLICK go to Chapter 8.

ON CLICK go to Chapter 9.

ON CLICK go to Chapter 10.

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

Chapter 2

Chapter 3

Chapter 4

Chapter 5

Chapter 6

Chapter 7

Chapter 8

Chapter 9

Chapter 10

3D Monster (hidden)

1.2

1.3

1.4

1.5

1.6

1.7

1.8

1.9

1.10

1.11

1.12

1.1

768 px

1024 px

192 px

128 px

640 px

830 px

32 px

768 px

1024 px

192 px

128 px

640 px

830 px

32 px

Chapter 1

Active Area

Bird

The interactive area where the objects can dragged around within the boundary.

After DRAG AND DROP all the Words (3.1.3 - 3.1.6) into Bird, the Bird will display Symbol 1 (3.1.7).

DRAG AND DROP to the Bird (3.1.2).

DRAG AND DROP to the Bird (3.1.2) only after Word S (3.1.3).

DRAG AND DROP to the Bird (3.1.2) only after Word O (3.1.3).

DRAG AND DROP to the Bird (3.1.2) only after Word U (3.1.3).

APPEAR only after all the Words (3.1.3- 3.1.5) were DRAG AND DROPPED into the Bird (3.1.2).

After APPEARING for 2 sec the Symbol is stored into Inventory Page.

Word S

Word O

Word U

Word L

Symbol 1

3.1.1

3.1.2

3.1.2

3.1.33.1.3

3.1.3

3.1.43.1.4

3.1.5

3.1.5

3.1.6

3.1.6

3.1.7 3.1.7

3.1.23.1.1

768 px

1024 px

192 px

128 px

640 px

830 px

32 px

768 px

1024 px

192 px

128 px

640 px

830 px

32 px

Chapter 2

Active Area

Candle Wick

Match

Match Box

Symbol 2

The interactive area where the objects can dragged around within the boundary.

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.

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.

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

3.2.2

3.2.3

3.2.4

3.2.4

3.2.5

3.2.5

3.2.2

3.2.1

3.2.3

768 px

1024 px

192 px

128 px

640 px

830 px

32 px

768 px

1024 px

192 px

128 px

640 px

830 px

32 px

Chapter 4

Active Area

Start / Restart Button

Trees

Symbol 4

The interactive area where the objects can dragged around within the boundary.

ON CLICK start the game.ON CLICK Restart the game.

The Trees will Glow and make a Musical Note. CLICK the Trees’ Glow sequence.

APPEAR only after the cor-rect sequence of Tree Glow is CLICKED.

After APPEARING for 2 sec the Symbol is stored into Inventory Page.

3.4.1

3.4.1

3.4.2

3.4.2

3.4.33.4.3

3.4.4

3.4.4

768 px

1024 px

192 px

128 px

640 px

830 px

32 px

768 px

1024 px

192 px

128 px

640 px

830 px

32 px

Chapter 5

Active Area

Year Dial

Month Dial

Date Dial

Symbol 5

Marker

The interactive area where the objects can dragged around within the boundary.

Show different Years. ROTATE by DRAGGING to line up with the Marker (3.5.5)

Show different Months. ROTATE by DRAGGING to line up with the Marker (3.5.5).

Show different Dates. ROTATE by DRAGGING to line up with the Marker (3.5.5).

Line up the Year (3.5.2), Month (3.5.3), and Date (3.5.4).

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.

3.5.13.5.1

3.5.2

3.5.2

3.5.3

3.5.3

3.5.4

3.5.4

3.5.6

3.5.6

3.5.5

3.5.5

768 px

1024 px

192 px

128 px

640 px

830 px

32 px

768 px

1024 px

192 px

128 px

640 px

830 px

32 px

Chapter 8

Active Area

Card

Card Hole

Card Stain

Page Stain

Symbol 8

The interactive area where the objects can be dragged around within the boundary.

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.

The Card Holes FILL UP with Words when each Card Stain (3.8.3) is MATCHED with Page Stain (3.8.4).

Matches with the Page Stain (3.8.4).

Matches with the Card Stain (3.8.3).

3.8.13.8.1

3.8.2

3.8.2

3.8.2

3.8.2

3.8.3

3.8.3

3.8.4

3.8.4

3.8.5

3.8.5

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

1024 px

192 px

128 px

640 px

830 px

32 px

768 px

1024 px

192 px

128 px

640 px

830 px

32 px

Chapter 10

Active Area

Symbols Interactive Area

Symbols 1-9

Symbol 10

The interactive area where the objects can dragged around within the boundary.

The Interactive Area to DRAG AND DROP Symbols(3.10.3) from Inventory (5).

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.

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

3.10.2

3.10.2

3.10.3

3.10.3

3.10.4

3.10.4

768 px

1024 px

192 px

128 px

32 px

64 px

130 px

50 px

Inventory Button

Gray Box for Inventory Button display.

Inventory Button. ON CLICK, Opens Inventory Pop Box

Page Scroller

5

5

5.1

5.1

6.3

6.3

Inventory: Grid style

6.3

6.3

5.1

5.1

5.2

5.2

5.3

5.4

5.5

5.5

5.4

Inventory Background

Symbols

Upper Tool Bar

Index Button

Movie Button

Page Scroller