A historical audio and video guidebook for an Android smartphone/tablet John Reid September 2011 Dissertation submitted in partial fulfilment for the degree
Download 239.28 Kb.
|
- Navigate this page:
- 4.1Front Screen
- 4.2Content Lists
4User InterfaceIn an application of this nature (one that could be used by non-technical users), designing an intuitive, easy to use and professional looking user interface was considered to be an important aspect of the project. The interface had to be kept uncluttered and yet allow the user to do many operations. Several features of Android such as using menu buttons and responding to the user touching different areas of the screen were used to achieve this design goal. User interface guidelines recommended by Google [50] were followed to ensure the application would display correctly on the variety of devices (smartphones and tablets) that Android could run on. A small example of this was specifying dimensions in the layout files in density-independent pixels (dp) so Android could scale views correctly for a device’s screen density. To achieve a consistent style across all the different Android activities, the colours used and the style of each page were chosen carefully. Reflecting the purpose of the application, an image of parchment paper was used on the background of the text pages to give it an old look. Photoshop was used extensively in the project for rescaling the images used in the application (to reduce their file size on a device) and to create the transparent “.png” (Portable Network Graphics) images and buttons used in the application. PNG images were ideal for storing images with transparent areas and the format was natively supported in Android. To create transparent areas in an image, Photoshop’s background eraser tool was used. A good example of this was the NLS logo used on the front screen: the original jpeg image of their logo was converted into a “.png” image before the background eraser tool was used to leave only the book logo and the text visible. The “setAlpha()” method of the button was then used in the source code to set the level of opacity for the background of this image. Blending in the button images and text to the background in this manner achieved a more professional looking application. Several changes to the user interface were made to respond to feedback from the user trials and several menu option settings were added to improve its usability (for example an option was added to disable the screen timeout for the map page, and a visual indication was added to show that the device had located a user’s current position). Many of the TextView (label) components on the screens were set to be slightly transparent with a white background so the text could be read better (for example when the text and background were both black).
4.1Front ScreenThe first screen displayed in the program took several iterations before it looked satisfactory: as shown in Figure 8., a single full screen image was used with the title of the guidebook at the top of the screen and the logo at the bottom left. When the user touched the top of the screen, a wheel was displayed allowing the user to change the current guidebook. To make the application look more refined, the background image was programmed to change when the wheel was rotated. A close button was added to allow the user to easily make the wheel disappear. After several experiments, a scale type of “FitXY” was used in the layout file for the main image displayed; this was to ensure that the image fitted the entire screen. This unfortunately can lead to some distortion of the image on some resolutions but it is generally acceptable. If needed, a change could be made in the future to use a different image for different resolutions. Different images for the front screen were used for each guidebook depending on whether the device was held horizontally or vertically. This was achieved by creating a “drawable-port-hdpi” directory in the application’s resource directory and storing the portrait pictures in there. Android would then automatically choose those images when the device was held vertically. After feedback from the trials, it was decided to change the operation of the buttons. Originally when the screen was pressed a wheel would appear allowing the user to change the current guidebook. However, many users had expected the guidebook content to be shown instead. The change was trivial to make and the existing text was changed from “Touch screen to begin” to “Touch here to change”. The user could then change the guidebook by touching the title of the guidebook or the help message at the top of the screen. It was decided to add the National Library of Scotland logo onto the front screen since they had been very supportive during the project. An image of a line of flags was also added in just below the NLS logo since it was one of the aims of the project to be able to change the language easily from the front screen. The image of the flags was meant to act as a visual cue to indicate that the application was multi-language and when the flag image was touched, a dialog box would then appear allowing the language to be changed. Based on feedback from the project supervisor, the original icon used to start the guidebook was modified as it was too similar to a “play” button (and users would naturally assume it played a video). This was then modified to be an arrow in Photoshop. For the convenience of the user, the application stored the guidebook that was last viewed so each time the application was run the previously selected guidebook was displayed.
4.2Content ListsThe Android “ListView” component was used to display the content list as shown in Figure 9.. One aspect of using the ListView was that you had to ensure there was a ListView component in the layout file called "@android:id/list" otherwise, it was discovered, the activity would crash when it was used. The “ChapterListActivity.java” class contained the code to populate the list based on the content in the guidebook’s XML file. 
After feedback from the project supervisor, it was agreed that displaying all the places of interest on the content list made it look cluttered and overwhelming. To improve this, an “ExpandableListView” Android component was tried to better layout the list items. As shown in Figure 10., this component displayed an arrow icon next to each item which the user could touch to expand or contract items. Unfortunately, it was seen that items without sub items were still displayed with an arrow marker, which was felt to be misleading to the user. Other Android developers were seeing the same problem and so that approach was abandoned. Instead, an additional activity called “SubChapterListActivity” was written to create a new list to place those items in. This new list was labelled “Places of Interest…” in the content list and can be seen in Figure 9.. 
Directory: courses -> ITNP99 -> PastDissertations -> 2010-2011 -> Dissertations courses -> Ieor 4600 Mixed-Integer Rounding Inequalities courses -> San José State University Social Science/Psychology Psych 175, Management Psychology, Section 1, Spring 2014 courses -> Kennan's Telegram (Excerpt) courses -> The university of british columbia courses -> A hurricane track density function and empirical orthogonal function approach to predicting seasonal hurricane activity in the Atlantic Basin Elinor Keith April 17, 2007 Abstract courses -> Cover page need figure & title by Proposed Table of Contents courses -> Objectives courses -> Dr. Jeff Masters' WunderBlog Download 239.28 Kb. Share with your friends:
|
