Prototype

Documentation can be found at the address:

• http://students.info.uaic.ro/~laura.lupascu/iStory/Documentation/

Wireframes

Design Patterns

We used the following design patterns:

• Thumbnail - used for displaying all the stories available (http://ui-patterns.com/patterns/Thumbnail)
• Steps Left - used for a story progress (http://ui-patterns.com/patterns/StepsLeft)
• Rate Content - used for providing user feedback (http://ui-patterns.com/patterns/RateContent)
• Collectible Achievements - used for stories that have a reward for the user (http://ui-patterns.com/patterns/CollectibleAchievements)
• Input Feedback - the user has entered data into the system and expects to receive feedback on the result of that submission. (http://ui-patterns.com/patterns/InputFeedback)

Final QoC

Q1: How to display the stories that can be chosen by users?

 Q2: How to provide user feedback for the stories played?

 Q3: How to display a story summary?

Q4: How to display the game progress?

QoC

Q1: How to display the stories that can be chosen by users?
O:
1. Cover Flow design pattern
2. illustrate all the stories in one page using a group of thumbnails
3. an horizontal scrolling  page that includes all stories
4. Article List design pattern

C:
- user concentrate his attention selecting only on a few items at a time
- an overview of all stories without any user action
- user stories name and picture plus extra information as a list
- all information on a single page
- tease the user by letting him know that there are more items available than what is currently shown
- quickly browse through a collection of items
- stories displayed one by one through a set
- an original and futuristic way of designing a page


Q2: How to provide user feedback for the stories played?
O:
1. create a forum section in the application
2. write a review for a story
3. Rate Content design pattern
4. Vote To Promote design pattern
C:
- users can talk and express what they think about games
- democratically decide what is the interesting content
- rich interaction between users
- quickly express the opinion on a story
- share a user opinion in greater detail


Q3: How to display a story summary?
O:
1. pop-up window
2. New page in the application
3. Accordion design pattern
4. a Tool-Tip
5. Tour design pattern
C:
- a dynamic and interactive way to show the summary for a story
- navigate among all stories while still being able to quickly see the summary
- in-page solution
- help the user to get a feel of how the application works
- compressing many elements in a compact space
- an introduction on the game he is about to play
- a help page for the user with detailed description of the game


Q4: How to display the game progress?
O:
1. Completeness Meter design pattern
2. show a progress bar
3. Steps Left design pattern
4. do not display the progress
C:
- allow easy navigation forward and backward
- keeps the user on track of completing a specific story
- user guidance for stories with multiple steps
- maintain excitement during the story telling
- show the user’s current position in the process
- keeps user interest and focus until the end of the game

Personas

The personas for iStory are available at the addresses:

1. http://students.info.uaic.ro/~laura.lupascu/iStory/personas/ (primary and supplemental)
2. http://students.info.uaic.ro/~emanuel.corduneanu/iStory/Personas/ (negative and primary)