Mobile Application Interface - DailyLifeApps - Case Study Example

Interaction and Usability (MOD002591) Mobile Application Interface Due 10 May Faculty: Science and Technology Department: Computing & Technology Module Code: MOD002591 Academic Year: 2012/2013 Semester: 2 Content 1. Introduction 3 2. Discovery Methods 3 2.1 Primary Research 3 2.2 Secondary Research 3 3. User Needs Analysis 3 3.1 Persona 3 3.2 Scenario 4 3.3 Task Analysis 5 3.4 Environmental Analysis 6 4. Preliminary Design 7 4.1 Storyboard 7 4.2 Menu Hierarchy Diagram 8 5. Detailed Design 9 5.1 Decisions Relating to User Needs Analysis 9 5.2 Decisions Relating to Usability 9 5.3 Decisions relating to Cognitive Issues 10 6. Implementation 10 7 Evaluation 20 7.1 Cognitive Walk-through 20 7.2 Heuristic Evaluation 20 8 References 21 Appendix 22 A.1 Questionnaire 22 A.2 Cognitive walk-through 23 A.3 Heuristic Evaluation 25 1. Introduction DailyLifeApps is a software company that produces applications for daily use. CardMemo is an application similar to flashcards, intended for the Smartphone and tablets. The application aims to digitize the flash card feature of people’s daily lives, making it possible for them to carry and use flash cards anywhere they want. 2. Discovery Methods 2.1 Primary Research Since the application is targeted to be used by the Smartphone and tablet users, the best mean of discovering the user requirements was through an online survey. A questionnaire was designed and launched online (See Appendix A.1 for the sample). The questionnaire comprised of closed questions only. The questions aimed at bringing out the background of the user and the general requirements in a card memorizing application. 2.2 Secondary Research Since the primary user of the application is a Smartphone or a table user, the human computer interface guidelines for designing interfaces for portable devices should be considered (Whatley 2010). These guidelines help interface designers to design applications according to the existing standardized interface format and improve the overall user experience. Although, the age of the user is generally young and so the learning capability is higher, it would be improper to rule out the adult population entirely (Forrester 2012). The design should be simple enough to suit users of different ages and learning capabilities, yet effective enough to achieve the intended goal. 3. User Needs Analysis 3.1 Persona To start with the persona development it is essential to categorize the users according to their profiles. The primary users of the application is a smartphone and a table user. Since there could be users who possess both the mobile devices, the persona would be one that uses both. Since the user could be of any gender or ethnicity, a silhouette of a general user would be used to avoid any biased thoughts or critiques (Valls et al. 2011). Secondly, the persona would be represented by name that is commonly used for both males and females. Portable device users are spread all across the world, so the geographic location background is not used. Alex – Smartphone and Tablet user (Primary Persona) “I want to be able to make and carry my flashcards all the time” Age - 32 years Occupation –Student Mobile Device Skills – basic Devices - Smartphone and tablet Background Alex, 32, is an International business student and has a kid, Tory, aged 4. Besides attending lectures, being a research assistant, Alex has to give one to two lectures a week. Alex has many acquaitances who speak Spanish, so Alex is trying to increase his Spanish vocabulary. A Typical Day Being a student and research assistant, Alex spends his mornings in the university attending classes and giving lectures. Alex comes across many new business terminologies that is a must to memorize. Alex has learnt to maintain a list of these words in the Smartphone. When free Alex makes flashcards to memorize the new words. Each card has the word on one side and the meaning on the other. Alex is surrounded by many colleagues and students who speak Spanish, which is a foreign language for Alex. Alex wants to learn the basic vocabulary of the language. At home, Alex’s kid, Tory, who is in a learning age, likes to play challenging games. So Alex looks for activities that would help Tory learn new things. Alex has stored different images (of animals, characters, colours) in his tablet and smartphone which Tory has to identify. Alex has made a separate folder for Tory’s images. Alex has arranges the images as ‘knows’ and ‘yet to learn’. Although Alex’s tablet remains at home, Tory waits for Alex, as Alex tells whether Tory has identified an image correctly or not. Alex has made flashcards for Tory, with the image on one side and name on the other, but Tory has learnt all of them. Goals To have a flashcard application in phone To be able to maintain list of words and their meanings To be able to manage lists of images Frustrations and Pains Keep track of words memorized No mechanism to identify correctly recognized images in phone or tablet Scenarios Manage images – Add/Delete images Manage words and their meanings – Add/delete words 3.2 Scenario Subject Persona Alex Scenario Description Managing Cards Background: Alex, is a student, teacher, foreign language learner and a parent. Alex’s life revolves around many new terminologies, words and image daily which need to be memorized. Objective: Alex needs to save flashcards into different files. Narrative: Alex maintains three separate files to keep flashcards for his Spanish, business terms and Tory. Alex places the new flashcards into the relevant file. To make a flashcard of an image or word, Alex need to select an image or write the word to make a flashcard. At the back of each card is the name of the image or the meaning of the card. Alex crosses out the card that has been memorized. The memorized cards are placed in the same file. The only indication of these cards is that they are crossed out. 3.3 Task Analysis The analysis of the two tasks is as follows: Task 1: To add a card 0. To add a card 1. Select content 1.1 Choose an existing image or take one from camera or write the word or expression 2. Add supporting text 3. Select a category 3.1 Choose from an existing one or make a new one 4. Save card Plan 0: Do 1-2-3-4. Task 2: To use cards 0. To use cards 1. Choose the lists from the category of ‘memorized’ or ‘to memorize’ 2. Remove a list 3. Choose a list 1.2 Go through the cards 4. Mark an card as memorized or forgotten 5. Remove a card Plan 0. Do 1-3-4. Do 1-2 to delete a list. Do 1-3-5 to delete a card 3.4 Environmental Analysis Since the application targets portable devices, the environment could be anywhere i.e. in a moving vehicle or a stationary place, indoor or outdoor. The environment could be quiet or noisy. 4. Preliminary Design 4.1 Storyboard 4.2 Menu Hierarchy Diagram 5. Detailed Design 5.1 Decisions Relating to User Needs Analysis Since the primary users range from young people to adults and with little or no previous experience with smartphones applications, the interface of the application is kept simple. Following are the decisions taken with view to the skill level of the user: The application closely mimics the steps taken to create flashcards in real life. Flashcards may be made of image or word, and the supporting text is not visible to the person. Same way, the supporting text only becomes visible when the user clicks on the bulb icon next to the card. To support the user need of maintaining card into separate categories, during the time of creating a flashcard user can select an existing list or create a new one to place the new flashcard in. Similar to the crossing out of a flashcard when memorized, the feature is present in the application. Sub-categories of memorized and to-memorize exist within every list. All the flashcards fall into the to-memorize category initially. 5.2 Decisions Relating to Usability This section highlights how the usability criteria are met by the application: Learnability: The usability criteria of learnability is met by following the original sequence of steps taken to create and use flash cards. The transition of one screen to another is similar to the original steps involved in the flashcard usage process. Utility: The application allows keeping track of the memorized cards as well as the cards that are yet to be memorized. Allowing users to add new cards to existing lists enable the users to maintain lists over time and usage. Efficiency: The application allows deletion of a list. This way all cards contained within a list can be deleted in one step. The user does not have to select each and every card within a list to delete. The tabular view of the memorized and to-memorize allows for a speedy access to the two categories. Memorability: The application uses the feature of bread-crumbs for the screen containing a card. This allows the user to know which list is currently open and which category within the list i.e. memorized or to-memorize. Ease of Use: The colours and contrast selected for the application are not stressful for the eyes. The text is readable. A general flow is maintained within the application itself. When the user is asked for a particular input, all other interactive elements are disabled till the user provides the input. The bread-crumb feature allows the user to track his/her current position. A shortcut to home is available, clicking which takes a user firectly to home screen from wherever the user might be. Effectiveness: The ability to arrange separate lists for flashcards makes the application more effective. The subcategories of memorized and to-memorize within the list. 5.3 Decisions relating to Cognitive Issues The mobile device skill level of the primary persona varies from basic to advance and the age varies from young to adult. Therefore, the learning capability varies from low to high. Furthermore, it could be that the user has no previous experience with using flashcards. To keep the application usable for all these users, following decision were made: The transition of screen and the flow within a screen is similar to the real word usage of flash cards. The buttons enable only when the required criterion is met for a step to move on. So the user is guided along a certain application flow implicitly. The breadcrumb feature is set to indicate to the user the current screen within the application. This relieves the user of memorizing how he/she got to the currently open screen. Home shortcut is present on each screen so the user can go back to main menu from anywhere. Confirmation alerts are implemented when deleting a list or a card. This ensures that the user does not make a horrific move accidently. 6. Implementation The prototype was implemented in WireframeSketcher Studio. A flow is maintained in the application through the enabling and disabling of the interactive interface elements. Following are the screenshots of the interface screens: Home Screen: The home screen contains the menu for choosing between the two operations; add an image or word and view image/word lists. About Screen: The about screen shows the name ad version of the software and the developing company’s name. Figure 1 Only OK button enabled Add Image/Word Screen: To add an image, the user can select an existing image or take an image from the camera right then. To add a word or expression, it can be written in the appropriate text box. Once the image is located or word punched in, the supporting text can be added and the list category (for storing the image in) can be selected. The save button enables only once all the information is entered i.e. the image or word, the supporting text and the category. Figure 2 Step 1: Save button disabled initially Figure 3 Step 2-a: If ‘Camera’ button clicked Figure 4 Step 2-b: If ‘Choose image’ button clicked Figure 5 Step 3: Image loaded. Save button enabled Figure 6 Step 4: Confirmation of image saved View Card Lists Screen: The screen is divided into two tabs (to memorize and memorized). Each tab maintains the same number of lists and indicates the number of images or words each list contains. Initially, all images and words that are added to the application go to the ‘to memorize’ list. Then only those images and words make it to the ‘memorized’ list which have been selected as memorized by the user. The user can delete the images and words cards from a list or the list itself. Figure 7 Listing on the to memorize menu Figure 8 On pressing the recycle bin button next to list Figure 9 List Status when confirmed to delete Figure 10 Empty Memorized list initially Figure 11 Memorized list with cards when opened Figure 12 Forgotten button clicked for a card Figure 13 When a list is opened Figure 14 When memorized button clicked for a card Figure 15 Pressing the bulb icon shows the text saved with the card Figure 16 Delete confirmation when recycle button clicked Figure 17 Status of deletion completion 7 Evaluation 7.1 Cognitive Walk-through The main interactive elements that govern the flow and response of the application are buttons. Therefore the cognitive walk-through evaluation was based on the clicking of buttons. The evaluation shows that the application is cognitively sound. Each click of a button is followed by the occurrence of the expected event, which can be traced back to the button that was clicked. In cases where the widget pressed is not traceable, it does not raise confusion. The goal behind each button click is achieved (See detailed evaluation in Appendix A.2). Thus the application gives proper feedback to the user and a purpose behind each button. 7.2 Heuristic Evaluation The results of the heuristic evaluation show that the application needs some improvements which are absolutely essential towards guaranteeing a good user experience. There is no help guide in the application. For the users to be able to use the application effectively, a guide must be present. Since the application uses standard icons for the operations such as open image, take a picture, save, delete and bulb for the tool-tip, it is important that all users understand these icons. Tool-tips must be present next to each button so that the users new to these icons can know what clicking a button would do. 8 References Forrester Research Inc. 2012. Forrester Profiles Smartphone and Tablet App Users [Online]. Available at < http://www.marketingprofs.com/charts/2012/9045/forrester-profiles-smartphone-and-tablet-app-users > Accessed on 15 April 2013 Valls, A., Garreta-Domingo, M. and López, M. 2011. Enhancing personas with their main scenarios. Proceedings of the 14th international conference on Human-computer interaction: design and development approaches, vol. I, pp. 136-141 Whaley, S. 2010. User Interface Guidelines for Mobile and Tablet Devices [Online]. Available at < http://www.simonwhatley.co.uk/user-interface-guidelines-for-mobile-and-tablet-devices > Accessed on 15 April 2013 Appendix A.1 Questionnaire 1. Gender: [ ] male [ ] female 2. Occupation: [ ] Home [ ] Business [ ] Social Worker [ ] Student [ ] Teacher 3. Do you have Kids? [ ] yes [ ] no 4. Do you have a Smart Phone or tablet? [ ] yes [ ] no 5. Have you ever used flash cards? [ ] yes [ ] no 6. Have you ever wanted to memorize pictures? [ ] yes [ ] no 7. Do you want an application on your phone/tablet similar to flash cards to help you memorize pictures? [ ] yes [ ] no 8. Would you like to arrange pictures according to categories? [ ] yes [ ] no 9. Would you want to each list to show the memorized and yet to memorize the pictures separately? [ ] yes [ ] no 10. Where do you prefer to have such an application? [ ] phone [ ] tablet [ ] computer 11. Would you use such an image memorizing application on your phone or tablet? [ ] yes [ ] no Findings of the survey: The questionnaire was launched to the general public at the following link: http://kwiksurveys.com/s.asp?sid=04fnyh665qbj286132651 The responses received were from people in business profession, teachers and students. Most of the responses received were from the students who use flash cards to facilitate them in their studies. Most of the users think using categories to arrange pictures by is a great idea. A.2 Cognitive walk-through Sr. No. User Action Effect of Action = Goal Action Visible Recognize Widget Understand Feedback 1 User clicks the ‘Add card’ button on home screen Yes. Load add card screen Yes. Add card screen loads. No Yes. On clicking the ‘Add card’ button on t home screen, the ‘Add Card’ screen loads 2 User clicks the ‘View cards’ button on home screen Yes. Open card list screen Yes. The ‘Card list’ screen opens No Yes. On clicking the ‘View Cards’ button, the Card list screen opens 3 User clicks the ‘load image‘ button on ‘Add Card’ Screen Yes. Camera picture is taken Yes. Image selection menu pops up. Yes. The loaded picture appears Yes. The ‘load image’ button helps select an existing image 4 User clicks the ‘Camera‘ button on ‘Add Card’ Screen Yes. Open camera to take picture Yes. The camera application opens Yes. The picture appears Yes. The camera button helps take a picture 5 User clicks the ‘choose category’ menu on the Add Card Screen Yes. Category is selected. Yes. The selected category shows on the menu. No Yes. The choose category menu is used to select an existing category. 6 User types new category on the Add card Screen Yes. The new category is considered. Yes. The select category menu disables No Yes. When new category is typed, the existing category option disables 7 User clicks the save button on Add Card Screen Yes. Card is saved. Yes. Card saved status message appears. No Yes. The save button saves the card 8 User clicks the ‘recycle bin’ icon next to list name Yes. List is deleted. Yes. List delete confirmation message appears No Yes. Recycle button next to the list is used to delete the particular list. 9 User clicks on the memorized tab on the Card list screen Yes. Show memorized cards listing Yes. Memorized card list opens Yes. The tab is highlighted. Yes. The tabs selects the memorized cards in the list 10 User clicks on the list name on the Card List screen Yes. Loads the first card in the list Yes.The card loads. Yes Yes. Clicking on the name of the list opens it. 11 User clicks the ‘bulb’ on the card screen Yes.Loads the text tip of the card Yes.the text tip shows on screen No Yes. Clicking the bulb loads the text of a card 12 User clicks the ‘recycle bin’ icon on card screen Yes. Deletes the card Yes. Deletion confirmation message appears No Yes. Clicking the ‘bin’ icon on card screen deletes the card 13 User clicks the ‘memorized’ button on card screen Yes.Marks the card as memorized Yes.Marking status appears No Yes. Clicking the ‘memorized’ marks the card as memorized 14 User clicks the next button on card screen Yes.Next card loads Yes. Next card opens No Yes. The next button is used to browse cards. A.3 Heuristic Evaluation Heuristic Issue Violation Severity Fix Visibility Match User control and freedom Consistency Error prevention Recognition rather than recall Icons for saving (floppy disc), delete (bin) and text-tip (bulb) are assumed to be known to all users Repetitive 4 Add a tool-tip next to each icon Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose and recover from errors Help and documentation A help guide to run the application and helpful tips next to icon buttons is not provided Repetitive 4 Add guide and tool tips Read More