Interaction and Usability - Report Example

Interaction and Usability (MOD002591) Smart Phone App Interface Academic Year: Semester: 2 Content Introduction 2 2. Critical Exploration 2 3. User Needs Analysis 3 3.1 Persona 3 3.2 Scenario 5 3.3 Task Analysis 5 3.4 Environmental Analysis 7 4. Preliminary Design 8 5. Detailed Design 10 5.1 Decisions Relating to User Needs Analysis 10 5.2 Decisions Relating to Usability 10 5.3 Decisions relating to Cognitive Issues 11 6. Implementation 11 7 Evaluation 14 7.1 Cognitive Walkthrough 14 7.2 Heuristic Evaluation 15 9 References 16 Appendix 17 A.1 Cognitive walk-through 17 A.2 Heuristic Evaluation 21 1. Introduction The Buy-N-sell Smartphone app has an interface that allows its users to make deals on the go for buying and selling different products (clothing, electronics, etc.). 2. Critical Exploration The goal of the Buy-N-sell interface is to facilitate its users in buying and selling goods. The interface design must mimic the manner in which humans achieve these processes in their daily lives. This can be done through a low level task analysis of how the buying and selling activities are performed in daily life (Richardson et al., 1998).Through such a user-centered design, users would easily relate to the interfaces and they will be exempted from learning extra details just to operate the application (Plass, 1998). Buying and selling tasks are common among teenagers, adults and elderly people. These people may belong to different professions, genders, ethnicity, countries, etc. So the interface design must be internationally accepted and should be usable by young and elderly users with novice to expert Smartphone usage skills. For this, the text and the format of the language must follow International standards such as use of English language without any slang words and no dense touch interfaces (the interactive icons and buttons must not be too crowded and should be appropriately spaced) (Sharma et al., 2012). Additionally, the interface must allow the text size to be changed as per user preference (Hussain and Kutar, 2012). The interface must also take into account the challenges posed due to mobile context, connectivity, small screen size and restrictive data entry methods, etc. (Zhang and Adipat, 2005, Harrison et al., 2013). As the context of Smartphones usage keeps changing, the environmental distractions such as noise, music, visual and auditory distractions, motion e.g. walking, may have a significant negative effect on the usability of the application (Coursaris et al., 2007). An effective approach for the environmental distractions could be that interface closely mimics the steps taken in executing activities in daily life (Harper et al., 2013). This would allow users to relate to the interface quickly and refocus on the task being performed. For better user satisfaction, the content on the interfaces should load quickly (Hussain and Kutar, 2012). In interfaces where data content is loaded from the network, usability issues arise due to limited connectivity (Harrison et al., 2013). The interfaces face problem with loading content as network services affect the data downloading and transfer time (Zhang and Adipat, 2005). So the interface must show appropriate messages for slow and unreliable network connections. The slow content loading problem can also be alleviated by using less data content in the interface (Hussain and Kutar, 2012). If there is less data on the screen, the need for scrolling would be less. Scrolling through content has a tiring effect (Baharuddin, Singh, Razali, 2013). Small screen sizes can make the interfaces aesthetically unpleasant and difficult to navigate (Zhang and Adipat, 2005; Harrison et al., 2013). If the key size if too small, it raises usability issues (Hussain and Kutar, 2012). With small buttons and labels the chances of increased slowness and errors are more in the data entry process (Zhang and Adipat, 2005). The majority of users operate their Smartphones with one hand (Hoober, 2013; Harper et. al., 2013). This makes the topmost area of the screen out of the general usage. Control buttons to configure the application, which are not commonly used, should be in this region of the screen. 3. User Needs Analysis 3.1 Persona To form a persona, the first step was to find the user categories to designate the persona types (Wang, n.d.). For Buy-N-Sell, there is only one category of users which forms the primary persona type i.e. the Smartphone users. These users do not have a specific gender, language, profession, ethnicity, culture and religion. The experience level also varies from novice to experienced, and the age-group ranges from young to elderly. The users perform two tasks; buy or sell goods. As pictures of people usually introduce biased notions and mistakenly represent a user stereotype, they are avoided (Valls et al., 2011). A silhouette was used as the profile picture. Additionally, the name, Ashley, common to male and female users, was used. As an interface designed for the elderly and novice users would be usable for the teenagers and adults with little or no experience with Smartphone interfaces, the persona is of an elderly user. A typical elder is between the ages of 40 to 60 (Sharma et al., 2012). Ashley – Smartphone user Primary Persona (Wang, n.d.) “I want to be able to buy and sell household goods from wherever I am and whenever I want” Age - 55 years Occupation – University Principal Device Skill Level – novice Background Ashley, 55, is a university principal, married and has kids. Besides going to the university and attending social meetings, Ashley looks after the general household affairs. A Typical Day Being the principal, Ashley’s mornings start with looking after the university affairs. Once home, Ashley spends time with family. At any random day of the year, the family decides that they need a digital camera for their family photos and the old toaster needs replacement. Ashley decides to wait till the weekend to sell the toaster at the local pawn shop while looking for the camera on the Internet. The prices online seem to be out of Ashley’s affordable range. Ashley decides to wait till weekend to check the camera at the pawn shop too. On the weekend, Ashley goes to the pawn shop and shows the owner the old toaster. The owner sets a price for the toaster that Ashley agrees to. So Ashley sells the toaster to the owner. Ashley looks around in the shop and finds an appropriate camera with a good set of features. The owner asks a price. Ashley proposes a lower price which the owner accepts. Ashley pays the owner and takes the camera. Ashley goes to an electronic store some blocks away to see a new toaster. The prices are posted on the toasters. Ashley checks the features set of some toasters and picks one that suits the family’s needs. Goals To be able to find a list of household items available in the locality for sale To be able to add an item to the list of items open for sale in a locality Frustrations and Pains Taking out time to go to the market to buy or sell Going from shop to shop for landing a suitable deal Scenarios Looking for an item on sale in the local area Offering an item to sell 3.2 Scenario Subject Persona Ashley Scenario Description Looking for an item on sale Background: Ashley has to buy a new digital camera for the family. Objective: Ashley wants a camera that has the required features and is affordable. Narrative: Ashley goes online to search for cameras in the local area electric stores and compares the features with the prices. When Ashley doesn’t find a suitable offer, Ashley goes to the local pawn shop to look for the camera. While looking through the available cameras, Ashley finds a camera that has all the required features. The owner tells Ashley the price of the camera. Ashley finds it affordable. Ashley buys the camera from the shop owner. Subject Persona Ashley Scenario Description Offering an item to sell Background: Ashley has to replace an old toaster. For that Ashley wants to sell the old toaster first. Objective: Ashley wants to sell an old toaster at a suitable rate. Narrative: Ashley goes to the pawn shop and shows the owner the old toaster. The owner sets a price for the toaster. Ashley asks for some extra amount. The owner agrees. Ashley sells the toaster to the owner. 3.3 Task Analysis The analysis of the two tasks is as follows: Task 1: Look for an item on sale 1. To look for an item for sale 2. Select a locality 3. Select a category of the item 4. Provide the name of the item 5. Go through the available items that show up 4.1. Check the description of the item 4.2. Check the condition of the item 4.3. Check the price of the item 6. Select the suitable item 7. Contact owner to make the purchase Plan 0: Do 2-3-4-5-6. Do 1-2-3-4-5-6 if the location is not previously set Plan 4: Do 4.1-4.2-4.3 Task 2: Set an item for sale 1. To set an item for sale 2. Select a locality 3. Select a category for the item 4. Set the item information 3.1. Add the name of the item 3.2. Add the description of the item 3.3. Add the pictures showing the condition of the item 3.4. Add the price of the item 5. Select the contact information for potential buyers 4.1. Set the name 4.2. Set the phone number 6. Set the status of the item as available 7. Select an existing on-sale item 8. Set the status as sold 9. Delete the item Plan 0: Do 2-3-5 to set an item for sale. Do 1-2-3-5 if location is not set. Do 2-3-4-5 if contact info is not set. Do 1-2-3-4-5 if location and contact info is not set. Do 6-7 to set status of item as sold. Do 6-8 to remove an item from sale. Plan 3: Do 3.1-3.2-3.3-3.4 Plan 4: Do 4.1-4.2 3.4 Environmental Analysis As mentioned in Section 2, since the Smartphones are portable devices, the user might be in a noisy or quiet place or may be stationary (sitting, standing, lying down) or in motion (walking, or travelling). For the interface to be usable in such a distracting environment, the content on each screen should be in close relation to the real life scenarios would make the user relate to the activity and re-focus quickly. Secondly, since the application needs network to load content, it is dependent on the quality of the network in the environment. There may be areas with slow or even no network coverage. The interface must show relevant messages to the user in cases of such situations. 4. Preliminary Design Figure 1 Location and Contact Info Not Set Figure 2 Location and Contact Info Set 5. Detailed Design 5.1 Decisions Relating to User Needs Analysis Considering the skill level and age of the primary persona, the interface of the application had no navigational shortcuts. With respect to the scenarios, following decisions were made: The interface flow closely relate to the steps the persona takes while buying or selling items in real life. The list of items on the interface uses network to load content which shows the exact availability of the item at any time. Through the contact information listed next to the available item, the persona can instantly get in touch with the seller through SMS or calling. Due to network, the persona can easily put an item on sale or look for an item to buy from anywhere at any time. 5.2 Decisions Relating to Usability Learnability: The interface flow and information can easily be related to the daily life buying and selling tasks. Utility: The users can see all the items that were placed for sale over time and which are yet to be sold. Reliability: The application uses the network to load the list of items so the content shown is always updated Efficiency: The process of buying and selling are speedy. The location and contact info is required to be set only once. To avoid accidental clicks, application configuration settings are placed in the rarely used area i.e. the top of the screen. Memorability: Due to close adaptation of daily life processes, users can relate to the application even if they don’t use the application daily or weekly. User’s current activity is visible in the screen title so a distracted user can instantly catch up. Ease of Use: The font can be increased or decreased from the settings menu. The interface flow is controlled through the enabling and disabling of input elements. To avoid input errors, drop-down menus are used. The home screen can be reached from any screen from home button on top. All interfaces use English. No slang words were used. Effectiveness: The dynamic interfaces allow users to find suitable buying/selling deals at any time and from anywhere. Location, category and item name filters items search. Satisfaction: An appropriate message is displayed in case of network error or low data connectivity. The interfaces are not cluttered with information. 5.3 Decisions relating to Cognitive Issues Buying and selling processes in real life do not involve any metaphors, so none were used in the design. To address the limited memory of the elderly users, the application closely relates to the real life buying/selling tasks. For the users unfamiliar with the technology, besides finger gestures on the interface to increase/decrease the text size, it can be done through the application settings as well. The interface has labels next to each icon. To cope with environmental distractions, the current task is visible on the top of every screen. Furthermore, the home button can be clicked at any time to go to the home screen. Confirmation alerts also allow the users to avoid changing critical information on the screen by mistake e.g. removing an item. 6. Implementation The prototype was implemented in WireframeSketcher Studio. The interfaces involved in the task of buying, selling and setting application wide settings are shown in the following figures. (a) buy option (b) select category (c) items displayed (d) item selected (e) contact seller Figure 3 Buying Item Interface Flow (a) main menu (b) sales menu (c) set item name and category (d) set description (e) image added (f) item put on sale (g) all items put on-sale (h)detail of an item (h) picture viewed (j) long-click item action (k) confirm removal Figure 4 Interfaces Involved in the Selling Process (a) main menu (b) settings menu (c) set location (d) set contact info (e) set text size Figure 5 Configuring Application wide Settings 7 Evaluation 7.1 Cognitive Walkthrough The evaluation results (see Appendix A.1) show that the application is cognitively sound. The effects of user actions coincide with the intended goals. The enabling and disabling of interactive elements show the availability of actions. As the screen is not crowded and the options for actions are not too many, the user can easily know which element performed what action. All the actions performed are understandable through the feedback displayed by the interface except in the cases of status update i.e. sold or deleted. As a result of the action, the interface takes the user back to the previous interface without indicating that the action has been executed successfully. 7.2 Heuristic Evaluation The results of the heuristic evaluation (see Appendix A.2) show that although the application provides a good user experience, two major improvements which would guarantee a boost in the overall user experience. 1. The application has no guide to help the users. Guides are essential in enabling users to effectively use an interface e.g. long press an item to list its actions options. Tooltips if present next to the interactive elements would clarify to the user, the purpose of each input. 2. The application is missing an important information messages i.e. status change of an on-sale item to ‘sold’ or deleting the item from on-sale list. These informational messages will help users know that the operation was successfully performed. . 9 References Baharuddin, R., Singh, D. and Razali, R., 2013 Usability Dimensions for Mobile Applications-A Review. Research Journal of Applied Sciences, Engineering and Technology, Vol. 5, Issue. 6, pp. 2225-2231. Coursaris, C. K., Hassanein, K., Head, M., and Bontis, N., 2007. The Impact of Distractions on the Usability and the Adoption of Mobile Devices for Wireless Data Services. Computers in Human Behaviour, Vol. 28, Issue. 4, pp. 1439-1449 Harper, S.; Chen, T. and Yesilada, Y. 2013. Controlled Experimentation in Naturalistic Mobile Settings. CoRR Vol. abs/1306.3767. Harrison, R. Derek, F. and Duce, D., 2013. Usability of mobile applications: literature review and rationale for a new usability model. Journal of Interaction Science, Vol 1, Issue 1, pp. 1-16. Hoober, S., 2013. How Do Users Really Hold Mobile Devices? Available at http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php [Accessed on 18 April 2014] Hussain, A. and Kutar, M., 2012. Apps vs Devices: Can the Usability of Mobile Apps be Decoupled from the Device? International Journal of Computer Science Issues, Vol. 9, Issue 3, No 3, pp. 11-16. Plass, J.L.,1998. Design and Evaluation of the User Interface of Foreign Language Multimedia Software: A Cognitive Approach. Language Learning and Technology, Vol. 2, Issue 1, pp 35-45. Richardson, J., Ormerod, T.C. and Shepherd, A., 1998. The role of task analysis in capturing requirements for interface design. Interacting with Computers, Vol. 9, Issue 4, pp. 367–384. Sharma, S., Singh, P., Sharma and Mahajan,A., 2012. Age based user interface in mobile operating system. International Journal of Computer Science, Engineering and Applications, Vol.2, No.2, pp. 177-184. Valls, A., Garreta-Domingo, M. and López, M. 2011. Enhancing personas with their main scenarios. Human-Computer Interaction. Design and Development Approaches, Lecture Notes in Computer Science, Vol. 6761, pp 136-141. Wang, X. Personas in the User Interface Design. Available at http://pages.cpsc.ucalgary.ca/~saul/wiki/uploads/CPSC681/topic-wan-personas.pdf [Accessed 19 April 2014] Zhang, D. and Adipat, B., 2005. Challenges, Methodologies, and Issues in the Usability Testing of Mobile Applications. International Journal of Human-Computer Interaction, Vol. 18, Issue. 3, pp. 293-308. Appendix A.1 Cognitive walk-through Description of the Task Find the toasters available to buy in a locality. UA 1 Click the buy button from the main menu. SD 1 A screen loads that requests for the category of item. UA 2 Select electronics from the drop down list and click ‘Next’. SD 2 All the items in the electronics category that fit in the display are displayed along with a search area to filter the items result. UA 3 Scroll the list down to see the items. SD 3 The list view is updated with the items in the category that were not previously displayed. UA 4 Enter the name ‘toaster’ in the search item field. SD 4 The list refreshes and displays all the toasters in the electronics category. UA 5 Select a toaster item from the list. SD 5 The item detail displays. UA 6 Click the provided image. SD 6 A larger version of the image displays on the screen. UA 7 Click ‘ok’ button next to the image. SD 7 The image closes and the item description loads again. UA 8 Click ‘contact seller’ button. SD 8 Options for contacting the customer are displayed. UA 9 Select SMS and press ‘OK’ SD 9 The default SMS application of the phone loads with the seller’s number already set as SMS destination. UA 10 Quit the SMS application and load the Buy-N-Sell application again. SD 10 The screen of particular item detail, loads again. Sr. No. Effect = Goal? Action Visible? Know widget for the action? Understand Feedback? 1 Yes. The first step to finding item loads. Yes. The button was enabled. Yes. Clicking the buy button on menu will start hunting for items to buy. Yes. It is visible from the title ‘buy an item’. 2 Yes. All items in the selected category loads Yes. The drop-down menu and ‘Next’ button were enabled Yes. Selecting the category and clicking the next button loads all the items Yes. The selected category is visible on the items screen. 3 Yes. The remaining items in the list are displayed Yes. The scrollbar is visible and enabled. Yes. Scrolling the bar up and down helps in browsing the items Yes. The swiping downward will load the items down in the list and vice versa. 4 Yes. The items get filtered according to the name Yes. The search field is visible and enabled Yes. Entering the item name acts as search filter Yes. All items in the list have ‘toaster’ in their names 5 Yes. The detail of the selected item loads Yes Yes Yes 6 Yes Yes Yes Yes 7 Yes Yes Yes Yes 8 Yes Yes Yes Yes 9 Yes Yes Yes Yes 10 Yes Yes Yes Yes Description of the Task Set a toaster for sale in a locality. UA 1 Click the sell button from the main menu. SD 1 A screen loads that displays the option to make a new sale or view items previously put on sale UA 2 Click new sale item SD 2 A screen loads that requests the name and category of the item. UA 3 Enter the name and select a category, and click the next button. SD 3 The screen loads with the entered name and category requesting further information. UA 4 Provide description and click the button to set item on sale. SD 4 The message for the item put on sale appears on the screen. UA 5 Click ok. SD 5 The main sale menu loads. UA 6 Click the ‘My On-sale items’ from menu. SD 6 The list of items on-sale is loaded. UA 7 Click an item from the list SD 7 The item description appears on screen. UA 8 Click on the image under the item. SD 8 The image loads on the screen. UA 9 Click ok under the image. SD 9 The item description opens again. UA 10 Long press an item from the list SD 10 The action menu appears to either change the status to ‘delete’ or ‘sold’ UA 11 Select ‘sold’ and click ‘OK’. SD 11 The list of items on-sale is re-loaded with the item marked as sold. Sr. No. Effect = Goal? Action Visible? Know widget for the action? Understand Feedback? 1 Yes. The sale button leads to the sales options menu. Yes. The button was enabled Yes. The sell button takes to the sales menu. Yes. The sell an item title is visible. 2 Yes Yes Yes Yes 3 Yes Yes Yes Yes 4 Yes Yes Yes Yes 5 Yes Yes Yes Yes 6 Yes Yes Yes Yes 7 Yes Yes Yes Yes 8 Yes Yes Yes Yes 9 Yes Yes Yes Yes 10 Yes Yes Yes Yes 11 Yes. Yes on setting the status of on-sale item as sold updates the item status. Yes. The radio buttons and buttons are enabled. Yes. Long pressing an item allows the status update option to show. No. The interface does not display any message of status set as ‘sold’ A.2 Heuristic Evaluation Heuristic Issue Violation Severity Fix Visibility Informational messages are not displayed when changing status of an on-sale item to ‘sold’ or when the item is deleted. Repetitive 3 Add appropriate information messages. Match User control and freedom Consistency Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose and recover from errors Help and documentation A users’ help guide for running the application and tooltips next to interactive elements is not provided Repetitive 4 Add guide and tool tips Read More