A Human-Computer Interaction Guide for the Implementation of a Mobile Web - Term Paper Example

Term Paper Self-Service Website for Mobile Devices By: First Last First Last Submitted: 10 June Table of Contents 1.0Information Gathering 3 1.1. Purpose of Mobile Service 3 1.2. Goals of Mobile Service 3 1.3. Target Audience 4 1.4. The Required Resources 4 2.0Design Strategy 5 2.1. Website Design for Mobile Devices 5 2.2. Applicable Interfaces for Mobile Devices 8 2.3. Mock-up Designs for Mobile Devices 8 3.0Prototyping 9 3.1. Possible Prototypes 10 3.2. Type of Usability Testing 10 3.3. Type of Evaluation Methods 11 4.0Implementation 12 5.0Maintenance and Growth 13 6.0References 3 The purpose of this report is to propose a Human-Computer Interaction (HCI) guide for the design and implementation of a mobile web application prototype for the Strayer University self-service site. Through the proposed prototype solution the students will be able to easily access their personal and course related materials from their mobile devices. 1.0 Information Gathering This section highlights objectives of the mobile service, identifies the target audience and defines the resources that would be required for implementing the prototype. 1.1. Purpose of Mobile Service Currently the students can access their personal and course related material from all the widely used internet browsers through their desktop systems. The purpose of the mobile application is to allow the students to access the same resources through their mobiles as well. If the existing online application supports mobile devices, it will grant instant and universal access to the students to their accounts even without a desktop computer. 1.2. Goals of Mobile Service The goals of the mobile web application are: 1. To develop a solution that runs on an iPhone, iPad, Droid, Blackberry, and other mobile devices. 2. To allow students the ability to register for a course, login and access the course related materials from their mobile devices. 1.3. Target Audience The main users of the mobile web application will be the students of Strayer University who use their desktop computers to log in to the online service and access their personal information and course materials. These students are aware of the usage of the University’s desktop web service. The students need to: Log into their accounts Access their personal information Access their course material When these students would access the web service application from their mobile devices, they would use a range of different devices with different hardware and software specifications, e.g. different screen sizes, browsers, memory, etc. So, the students would want the mobile application to: Have a uniform look and feel across the different mobile devices. Have an interface which can be related to the corresponding desktop self-service interface which they are used to. 1.4. The Required Resources To implement the mobile web application prototype, access to the existing site’s code would be required as the web pages of the current site will be studied and will eventually form the basis of the proposed mobile application. Furthermore, in order to assess and evaluate the working of the web application prototype, an online hosting space would be required. The web application would be hosted on the online server and then will be accessed through the mobile devices. In order to test and evaluate the prototype, the widely used mobile devices such as Blackberry, iPhone, Android and Nokia phone would be required. Although the testing can be done through emulators, but the results of such testing methods are not reliable (Kyrnin, 2014). 2.0 Design Strategy This section provides an overview of the design strategy adopted for the prototype. 2.1. Website Design for Mobile Devices As the students are accustomed to using the desktop site for logging in and accessing their personal and course material, the content and functionality of the mobile application would be the same as that of the desktop website. The students would have access to all the information that they normally have on the desktop site. To provide a mobile web application, there were two choices to consider; either make a mobile app that can be installed on the devices or make a mobile website similar to the desktop site but optimized for mobile usage. As the content and functionality would remain the same, designing a website for mobile is the best strategy to adopt instead of structuring a mobile app for the different mobile devices (McWherter & Gowell, 2012). Furthermore, designing a mobile app would require using cross-platform technology to make it usable for different mobile devices. In contrast to desktop computers, mobile devices have a limited feature set which poses a problem when viewing websites that are designed for desktop computers which have big screens, high memory and speedy processors. Mobile devices, on the other hand, have small screen sizes, limited memory and processing capabilities. Although the hardware and software specifications of the modern smart phones are improving in the performance, memory, power aspect which would guarantee a better web experience, there is a limit to which the screen size can be increased while keeping the mobile device a handheld device. Due to the small screen size, a desktop site with fixed web design when viewed on a mobile device poses content layout issues. For instance, when the Strayer University’s login page is loaded in the different mobile device emulators, the website does not display as it would on a desktop computer (see Figure 1). Due to limited screen size of the mobile devices the content does not fit in the browser width and horizontal scrolls get generated. Horizontal scrolling for reading a line of text would have an adverse effect on the overall user experience. So in the interface intended for a mobile device, the content must adjust within its screen size. (a) Galaxy Y (b) Nokia Lumia 920 (c) iPhone 5 (d) Blackberry Curve 8900 Figure 1 Strayer University Website Viewed on Different Mobile Phones While devising the mobile site prototype, two options were considered. To create new, separate web pages with adaptive web design intended only for the mobile device users. Widths are defined for commonly used devices. By detecting the size of the browser, the webpage is loaded (Rickhoff, 2014). The users can be directed to the mobile site by placing its link at a noticeable position on the desktop site, which the mobile device users will manually click to access the mobile version of the site. Or scripts can be used that automatically determine the device type of a user based on which the user can be redirected to the mobile website. To modify the existing website, making its design responsive to the type of devise accessing it. The problem with the first option was that since a separate mobile site would be created, it would require constant synchronization of the content with the desktop website. Additionally, the layout of the mobile site would not adjust for all browser sizes. It may still pose problems for the devices that have a smaller or bigger screen sizes than the selected preferred devices (Rickhoff, 2014). A separate sub-domain would also be required for hosting the mobile site. Furthermore, the user may not see the link for mobile site or there could be errors in the device detection script for the automatic redirection. The chosen design strategy for the mobile website was to make the design of the existing desktop site responsive. As the existing desktop site is not complex in design, the task would be easier and cheaper to achieve. For instance, the current desktop web application does not use Flash technology, which is not supported by iOS mobile devices i.e. iPhone. Therefore, by simply defining and adding the CSS media queries to the styles of the existing site, the content layout can be adjusted for the different mobile devices (Middleton, 2012). This would also remove the horizontal scrolling problem. Furthermore, the site uses client side JavaScript, which is supported by all the smart device browsers. 2.2. Applicable Interfaces for Mobile Devices The Strayer University website offers the students to login to their accounts and register for the courses. On the login page, it also provides information about the university, legal and privacy details, license information and its contact details. Although less likely but a student may want to access this extra information as well. So the mobile interface would have all the information content which is displayed on the desktop site. However the pages that all the links on the home page lead to, would require slight design modification. For instance, to address the issue of small screen sizes of the mobile devices, all the descriptive information would not be displayed at once. Text related to a particular heading would remain hidden. The text for a heading will show only when the heading is clicked by the mobile device user. This way the student would access only the required information without having to scroll unnecessarily. The scope of this project however is to only optimize the homepage i.e. the login page and the course page for the mobile device users. 2.3. Mock-up Designs for Mobile Devices This section presents the prototype designs for the two pages that the students are most likely to use when accessing their course materials from their mobile devices. A. Home Page (a) Home page (b) More Clicked (c) Arrow Clicked Figure 2 Home Page Mock Up Design B. Course Enrollment Page As can be seen from the interface design, the intention is to make all the content which is available on the desktop site to be available to the user on the mobile site as well. Considering the small screen sizes of smart phones, the extra information is shown to the user only on request. As the content would fit on the screen, there would be no horizontal scrolling which will deliver better user experience. 3.0 Prototyping This section provides details of the prototypes, the usability testing and user experience evaluation methods. 3.1. Possible Prototypes As a student would most likely access the site through the mobile device to access course material or personal information, the prototype would require a modified design of the login page and the course page. The desktop site uses CSS for styling the web pages. As the prototype requires the simple addition of some CSS media queries to the existing site code, the prototype can be created both both these modules without changing the desktop site’s content. Modifying the style of these two pages alone would be enough tp enable the students in accessing their course materials from mobile devices while guaranteeing a better user experience. The users would access the site link from their mobile devices as they do from their desktop systems. The interface would be similar to the desktop site but the layout of content will be optimized for their smaller mobile device screens. Since the CSS media queries can be applied to all the pages that import a style, the same stylesheet can be linked to all the other pages of the site thus ensuring that the page adjusts its layout according to the mobile device’s screen size. 3.2. Type of Usability Testing To determine the interface design that will provide the best user experience, alpha and beta testing could be done for the prototype site. In the alpha testing, the prototype could be tested on all the major mobile devices by the application development team. The layout of content must be uniform across all the devices and there must be no horizontal scrolling with any mobile device. All self-service functionalities must work when accessing the site through a mobile device. The users must be able to login and register a course as they can do in the desktop website. Once the alpha testing is complete, the beta testing would start. The beta testing would revolve around a subset of the actual students (e.g. five students) using the self-service through their mobile devices. After a week of usage, a simple feedback from the students regarding the mobile site interface would suggest the students’ usability experience. The feedback can be achieved through a survey comprising of the following questions. 1. What mobile device did you use to access the site? _______________________ 2. The page loaded without problems on your mobile device? O Yes O No 3. Were you able to login the mobile site? O Yes O No 4. Were you able to register a course through your mobile device? O Yes O No 5. Is the overall experience similar to how you use the site from your computer? O Yes O No 6. Which version would you prefer when accessing the campus site through mobile device? O desktop version O mobile version Depending on the percentage of students in favour of using the mobile version of the site when accessing through mobile devices would reflect the usability of the site. 3.3. Type of Evaluation Methods The evaluation of the prototype mobile site’s usability will depend on the prototype usage experience of the entire student body. Once the alpha and beta usability testing are complete, the prototype website should be hosted on the actual University server for all the students to access and use as part of their daily routine. After a month of usage, the same usability survey should be conducted to evaluate the user experience of all the students. The first evaluation method adopted for assessing the user experience could be through analysing the increase in the number of mobile accesses before and after the prototype installation. If the mobile site improves usability from the existing desktop setup, there would be more mobile accesses that the current number. Another user experience evaluation method could be through the analysis of the results of the usability surveys. For instance, if over 80% of the students prefer using the mobile version of the site in their mobile devices, and 100% of the users were able to login and register a course, then the prototype would be evaluated as successful. Once the prototype is evaluated as successful, it can be implemented as a constant feature of the University’s online self-service. 4.0 Implementation The mobile interface will use the same website and functionalities as the current desktop web service. Only the layout will be be flexible through adding CSS media queries for the different devices to the existing stylesheets of the desktop site. The current desktop website uses server and client side scripting languages such as PHP and JavaScript. The PHP functionality is carried on the server while the JavaScript functions are executed by the client’s browser. Smart phone browsers support JavaScript. The current desktop site supports Chrome, IE, Firfox and Safari web browsers. Most of the mobile devices also use these browsers. Therefore, the site’s features will work uniformly across the iOS (which uses Safari), Android (which uses Chrome), Blackberry 10 (which can access as IE and Firefox user) and Windows (which uses IE) based mobile devices. Thus, all functionalities in the mobile interfaces will work similar to the desktop website. The only change would be in the layout of the content of the login and the course page. Since the mobile devices have smaller screen sizes, the page content would be arranged according to the screen size through the responsive web design. 5.0 Maintenance and Growth Through the responsive web design, website maintenance would be easier. The CSS media queries would be added to the existing Strayer University website as such without having to change the original content. Furthermore, no maintenance would be required for managing a separate mobile website. The mobile users will access the same website and any changes made to the desktop website will instantaneously show on mobile devices as well. The CSS media queries, execute on the mobile device itself and gather the information of the device before rendering the page. As the responsive web design self-service website would have standard CSS media queries, it will be compatible with all the mobile devices that support IE, Firefox, Safari and Chrome browsers. The responsive web design is flexible to different screen sizes. In case, newer devices are introduced that vary considerably from the current widely used devices, the relevant CSS media query can be added the website’s stylesheet for that particular device. Thereafter, when this new device accesses the website, the page is rendered according to its screen specifications. Thus, through the responsive web design, the website would remain compatible even with the future mobile device advancements. 6.0 References McWherter, J. & Gowell, S. (2012). Professional Mobile Application Development. John Wiley & Sons, 10-Aug-2012. Pp. 118-124. Rickhoff, A. (2014). Thinking Responsive? Three Options for Web Design Across Devices. Solstice Mobile. Retrieved from http://www.solstice-mobile.com/blog/thinking-responsive-three-options-for-web-design-across-devices Middleton, B. (2012). Responsive Design vs Mobile Site: The benefits and the drawbacks. Planet Argon. Retrieved from http://planetargon.com/assets/Planet_Argon-Responsive_Design_vs_Mobile_Site.pdf Kyrnin, J. (2014). How to Test Mobile Web Pages and Applications. Practical Tips for Testing Mobile Apps Even if You Don’t Have a Mobile Device. Retrieved from http://webdesign.about.com/od/testing/a/test-mobile-web-pages.htm Read More