Why AIR, not web?

A big dilemma I faced when choosing the platform for the interactive textbook were the pros and cons between a Flash AIR application and a HTML5/Javascript website.

Features that can be implemented on both are many; both can:

  • have user account and local storage
  • animate visuals
  • link to 3rd party APIs from YouTube and Google Images
  • present dynamic content from an online database
  • integrate social networking Facebook and Twitter

Creating the project on a web host and taking advantage of WordPress plugins admittedly is easier and is a more established method of carrying out many of these features. Though a critical point where a web project falls short is that it needs Internet. There are various offline modes being worked on in terms of HTML5 and browser specific local storage modes, but these are either conceptual or experimental, and in no way stable enough to support a full blown application.

The interactive textbook needs to function offline so users can continue their work if Internet becomes unstable or if one doesn’t exist at all. An AIR application can be downloaded to the users choice of device and only requires a connection for 3rd party interaction and on the first startup to download the most recent version of data from the online database.

For these reasons, I have decided to remain on a Flash development platform. In the future however, perhaps in 5-10 years, a web version running on native HTML script could be more efficient and accessible.

Fun Theory & Gamification

Gamification is a bad word to use because it implies taking ordinary tasks and making it a pseudo-game by adding things like score counters. Like making sharpening a pencil into a game, sharpen 10 in a minute and you win. Although it’s a ‘game’, it’s void of any actual game design and mechanics. Gamification with fun theory in mind helps guide me to implement certain game-like features that add to the experience rather than act as a score counter. The interactive textbook requires a sense of progression.

Progress Bar
Taking a note from the recent game GuildWars 2 from ArenaNet, a progress bar is much more encouraging than a specific numbered requirement. A problem they found in previous games where missions had a set goal, such as collecting 5 of something, is that it was so predictable and measurable it became a chore. With a progress bar, the exact progress is obscured and less focus is put on counting your score and more on your overall progress.

Leveling
To add to the sense of progression, and to record level of difficulty, each chapter in the book will count as a level. Each chapter will have it’s own progress bar that adds to the overall main progress bar. Tasks laid out that appear while reading the chapter will challenge the user, and if successful, add to the chapter’s progress.

Chapter Questions
While present on a chapter, questions will appear to challenge the user and measure progress. These questions could be from the current chapter, or from a previous completed chapter. Each subtitle in the section will have at least 1 question and will appear at the end of the section.

Time Trial Challenge
Once a chapter’s progress bar has been filled, it will unlock a time trial for that chapter. The time trials will have a fixed time limit and questions will be presented one after another. The user can set personal records of how many questions can be answered in time and the results, if desired, can be shared through their social networks. There will also be a final time trial that will unlock after scoring a minimum amount on each previous time trial and would include questions from all chapters.

Rewards & Incentives
Personal progress and bragging rights are inherent to the gamification and challenge system. As the user reaches certain milestones, achievements will be rewarded to their account. Further rewards could be the unlocking of certain features and abilities in the software.

Aesthetics

One more thing to develop before constructing my prospectus would be the visual experience and atmosphere of the interactive textbook. These elements need to be thoroughly tested for appeal, legibility, and personal preferences, but as of right now I will work with this.

Colour Palette
Colours for this project need to be clean and clear, but also appealing to a gender neutral youth. They should enhance the presentation of the content without distracting the user from it, suiting any topic. Keeping the colours minimal with a few contrasts should be an effective design. The colours chosen should also be ‘lifestyle-esque’, such as bright and natural tones, to make it more approachable and relaxing. The last thing we want is to have garish or eye-straining colours distracting from the content, but we don’t want them to be dull and boring either.

Colour Options

Pure white (#ffffff) and dark grey (#0e0e0e) will be the primary colours for text and UI elements. The highlight colour will be used sparingly, but present on every page, to highlight features, sections, buttons, active elements, notifications, and the like. The colours need to stand out on white and dark grey clearly so there should be no issues of difficult to see elements.

For the highlight colour, it will be customisable from a preset list of colours that work with the interface. That will allow students to feel a level of personalisation and cater to their personal preference, much like smartphone interfaces as seen in Windows Phone 7 tiles.

Font
Fonts used will be strong and minimal to remain neutral and preserve clarity. For this reason, I will be keeping the font choices to a maximum of 2, one for titles and one for body copy. For cost and licensing reasons, only free fonts will be used.

Bebas & Lato Font
Click for a clearer view

Bebas Neue is a very strong and clear font which solved the kerning problems with the original Bebas. Bebas Neue is also an all caps font, so using it for anything other than titles is unwise.

As for the body copy, I will use Lato v1.104. A comfortable body copy is rare in the world of free fonts but Lato, in my opinion, is the most legible san-serif font in terms of kerning, letterform, and bold and italic styles. Styles for Lato range from ultra-light 100 to ultra-bold 900, making it versatile and adaptable. Lato is also available on Google Web Fonts so it’s easily usable on webpages too.

Design Mocks
PageMock

Technical Specifications

Before moving on to my prospectus, I think it’s a good idea to outline all the technological needs for the interactive textbook.

Hardware
The interactive textbook is meant to run on multiple platforms including desktops, laptops, tablets, and smartphones. Displaying its flexibility would be beneficial to my eventual presentation at the end of my final semester, so I plan to utilise a Windows PC, an Apple iPad, and a Samsung Galaxy smartphone to demonstrate the application.

Software
Being an AIR application, it is primarily scripted in ActionScript 3.0 and developed in Flash, which I am proficient and should have no major issues executing.

As the application is meant to run on multiple platforms, the interface design needs to be reactive, so positioning of UI elements needs to be done through script based on the stage width and height.

Also, most of the content for the interactive textbook will be hosted online in a single XML document. This makes it easy to update the content as you just have to change the XML document which is downloaded every time the application is launched and has an Internet connection. The content is then saved locally on the device being used. If there is no Internet connection, the application will display the last saved version of the content.

3rd Party Content
Including extra content is essential to the concept of my project. YouTube, Google Images, and social media need to be integrated directly into the application, utilising their APIs, through my AS3 scripting. As these are features I’m not currently adept with, below are tutorials demonstrating how to achieve these results:

Technological Specifications Function Model (to be refined)