Candidates should demonstrate their knowledge and skills in communication either through working with others or through interface design. This should include evidence of either (a) or (b).

In this section I will demonstrate how I used visual communication, human interaction to produce engaging and accessible interfaces for blended learning and distance learning projects

Currently at the University of the West of Scotland, one of the software applications we use to aggregate and present information is Wimba (Blackboard) Create. This piece of software is an add-in for Microsoft Word and can generate webpages (similar to an eBook), complete with user navigation, hierarchy and a table of contents all from a formatted word document.

The Wimba Create output is then inserted into our online modules, located within our Virtual Learning Environment (VLE) Moodle. It can be displayed as a pop up, within the Moodle interface or in a new internet browser window. One of the obstacles presented by Wimba Create is the navigation, layout and presentation of graphic elements (like images and video) don’t always display in a way that suits the device it’s viewed on. In the case of mobile devices such as tablets, smartphones and IPhones this is an issue as information is lost due to the navigation elements taking up space on screen, the text can be too small to read and images don’t resize to fit smaller screen resolutions.

In order to address the above issues, I am developing a customised Wimba (Blackboard) Create interface, which will be able to adjust the interface and content to suit the device it’s being viewed on. Wimba (Blackboard) Create is controlled by CSS3 and XML, by manipulating the CSS3 code through media queries I can alter the navigation, text size and graphic elements of the interface to accommodate for different sizes of display. This would allow for greater accessibility to materials across a range of varying screen resolutions and enhance the student experience by being able to access them through their mobile devices.

 The first step was to analyse the requirements of the project, one of which was to gather information on the various pixel dimensions of mobile devices. I used the dimensions found on wikipedia to give me a set of measurements to include in the media queries so I could adjust the interface to suit the device it was displayed on. I then began to programme/code the CSS3 to adjust the interface for various devices, this gave me the flexibility to adjust the user navigation and increase the size of text for smaller devices, making these graphic elements more accessible for users. In the case of small smart phones some of the larger navigation took up unnecessary space, like the side bar navigation (table of contents) - I removed this for smart phone devices.

Reflective Comment

 I enjoyed working on this project immensely it gave me a sense of satisfaction developing a custom interface that could be used anytime we develop materials Wimba (Blackboard) Create and most importantly benefits the student learning experience. We're now in an age where interfaces, materials, media all have to be flexible and most importantly accessible through a multitude of devices. This is why I developed this interface, to address those issues and at the same time I relished learning some new programming skills. I have contacted other developers in order to develop an HTML 5 video player, in order to refine the experience for the student.

List of pixel dimensions for a wide range of mobile devices

jQuery Library

What are Media Queries?

What is CSS3?

Click on the above links to see the websites I used for information and technical advice whilst developing the interface.

Posted by Greg Walters (77770933) on 25 August 2013, 9:57 PM

Posted by Greg Walters (77770933) on 18 February 2014, 12:51 PM