CMST 385 Principles of Web Design and Technology is an undergraduate web design course taught at the University of Maryland University College. The online version of the class involves the use of WebTycho and weekly conferencing. For a long time, supplemental learning resources have been used in this class including videos, presentations and external reading materials to assist with student learning, all of which have been made available through the WebTycho Learning Management System (LMS). Unfortunately the LMS is not friendly towards mobile devices and therefore students are advised to only access class materials via a PC or Mac with a traditional web browser.
This project introduces a new learning resource, an eBook based on the Baker framework, which is fully compatible with newer mobile devices including Android, iOS and Windows. The purpose of this eBook is to enable students to continue their learning while on the go. The eBook has been designed with human cognition principles in mind in order to provide a human centered user experience. Particular focus has gone into cognition areas including attention, memory user mood, learning, emotion and motivation. Because the eBook has been developed specifically for CMST 385, it helps determine the average target user of the resource.
– Finished prototype is available to view at http://www.carnaghan.net/ebook
– Source files are downloadable from http://www.carnaghan.net/ebook.zip
Limitations
Before reviewing this project in more depth, it is important to highlight some of the limitations of the prototype, which would be resolved in the final version of the application:
- The prototype is a web app, not a full native application. As such certain limitations exist such as an absence of horizontal (sectional) page swiping (a commonly used method of swiping a device to change pages). This feature will be available as the native iOS, Andriod and other mobile versions are developed.
- System prompt sounds are limited in the web app. Button clicking and other auditory responses will be implemented into the final native version of the application.
- While most content exists for sections 1 through 3, sections 4 and 5 remain incomplete in the prototype. These sections would be refined and developed further in the final version. Note the CSS timeline is in early beta form and would be presented more professionally.
- Additional features for controlling font size and other layout customization, via easy to use controls are also planned for the final version, which are absent in this prototype.
- Currently the prototype does not render correctly using Internet Explorer 9 on a PC. It works fine using Chrome, Firefox and Safari, however for best performance, it is recommended to run on an iPad in landscape mode.
Please note that the pinching gesture has been disabled in this application in order to reduce end-user confusion.
Technical Specifications
As mentioned in the overview, this eBook has been developed using the Baker Framework. Baker is a commonly used HTML5 framework which can be used to develop web app and native app eBooks for various mobile devices. Additional technologies were used during the making of this eBook (all listed in the appendices), which enabled the implementation of greater interaction, styling and multi-media. The entire application was written using a mixture of HTML 5, CSS and various JavaScript libraries.
The eBook is broken into 5 main sections, covering core concept areas of the CMST 385 course. The sections include a mix of textual, audio, video and interactive material, which have been designed to provide an engaging learning experience. As mentioned in the overview, sections 4 and 5 are incomplete at this time, however would be completed for the final application.
While the eBook will work via a web browser using a PC or Mac, it has been designed with mobile applications in mind. The prototype has been heavily geared towards the iPad, however in its current form, it should render correctly on other tablet devices.
Cognitive Principles in Design
Much thought went into the development of this eBook in terms of Human Centered Design, especially in the areas of perception, attention, memory, mood, emotion, and of course learning, which is the primary area of concern for this application. The initial design catered for clean and clear formatting in its overall style.
The book itself had to be designed to be used on a mobile device and as such the overall layout needed to be presentable in this format. Visual, auditory and interactive cues were placed carefully throughout various parts of the application along with different color prompts, 3D buttons, side-bar text and media. Careful consideration was given to not interrupt the overall flow of the information, while at the same time providing opportunity to further explore concept areas via interactive components and external resources. The design itself has been fashioned in such a way in order to put enough pressure on the user to keep them focused on the content. The book caters for various human sensory modes, predominately visual with additional audio and interactive components addressing touch responses. Each of the touchable elements including the buttons and tabs were designed to provide visual feedback or an illusion of an object being physically pressed. In the final version it is planned to add additional clicking sound responses to some of these elements.
When designing this learning resource, it was important to assess who the target audience would be and what implications this would have on the overall design process. The vast majority of CMST 385 students either are undergraduate degree seeking students within a computer science major or a web design certificate student. These students tend to be more tech-savvy than the average undergraduate student and are often excited about new technologies and medium. With this in mind it was important to develop an eBook that would meet the expectations of this target group in order to become an effective learning resource. One of the areas of human cognition that was important to consider during the design phase was the effective manipulation of memory. The eBook was designed to have a consistent look and feel throughout with an easy to read typeface and full control for scrolling via vertical swiping. Much information presented was broken down into bite size chunks for easier consumption and to help improve memory of some of the more technical concepts. Information has been repeated throughout the various sections and key concepts have been carefully emphasized in various parts of the eBook via side bars, audio sound bites and video. The overall content was designed in such a way to only be relevant to the user in terms of the required technical information needed to begin working with web design in CMST 385. This relevance is an important part of both memory and increasing the overall understanding of the target users of the application.
The eBook was designed to promote a positive mood and learning experience by engaging the user in the various sensory modes as mentioned earlier and by encouraging interaction and completion of various tasks. The interface itself was developed to provide for full control by the user of the various content areas. For example sounds and video will not play without the user first tapping these resources. Full vertical swiping / scrolling control was implemented the same way as with other commonly used mobile applications. It was developed to provide a modern and convenient portable format containing video, audio and imagery promoting a more positive learning experience than that of the typical text book or written words. Motivation has been fostered by presenting the learning material in an easy to digest format employing the use of sub-sections, interactive components and small tasks to keep the reader on track and engaged with the content. Graphical representations were used where possible to aid the learning process. These can be seen throughout the eBook to help clarify some of the more advanced subject areas including Unix permissions and system commands.
