Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Interaction design comp1649 Slide 1 Interaction design comp1649 Slide 2 Interaction design comp1649 Slide 3 Interaction design comp1649 Slide 4 Interaction design comp1649 Slide 5 Interaction design comp1649 Slide 6 Interaction design comp1649 Slide 7 Interaction design comp1649 Slide 8 Interaction design comp1649 Slide 9 Interaction design comp1649 Slide 10 Interaction design comp1649 Slide 11 Interaction design comp1649 Slide 12 Interaction design comp1649 Slide 13 Interaction design comp1649 Slide 14 Interaction design comp1649 Slide 15 Interaction design comp1649 Slide 16 Interaction design comp1649 Slide 17 Interaction design comp1649 Slide 18
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Interaction design comp1649

Download to read offline

UOG Coursework 2017

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Interaction design comp1649

  1. 1. Interaction Design Coursework April 2017 Module : Interaction Design Course Code : COMP 1649 Coursework Leader : Eur Ing, Dr Mary Kiernan Due Date : 18th April 2017 Centre : KMD Yangon, Myanmar Word Count : 3115 words (Report only)
  2. 2. Interaction Design Coursework April 2017 [2] Table of Content 1. Introduction ………………………………………………………………………….. 3 1.1. User profile …………………………………………………………………….. 4 1.2. Game Scope …………………………………………………………………… 4 2. Cognitive psychology 2.1. Critical discussion of cognitive psychology and key issues .…………….. 5 2.2. Evaluating the usage of cognitive psychology ..…………………………… 7 3. Issues in mobile design 3.1. Current mobile design issues research …………………………………….. 9 3.2. Avoiding the current issues ………………………………………………….. 11 4. Design principle 4.1. The use of design standard ………………………………………………….. 12 4.2. The method used ……………………………………………………………… 13 5. Conclusion 5.1. The high-fidelity prototype …………………………………………………… 14 5.2. Evaluation of final prototype …………..…………………………………….. 15 5.3. Summary ………………………………………………………………………. 17 5.4. References …………………………………………………………………….. 18
  3. 3. Interaction Design Coursework April 2017 [3] 1. Introduction In this practical report for developing design for an institution call ABC institution will included about cognitive psychology and evaluation of it with examples, the design issues in mobile and tablet and the design standard which is going to be use when developing the final high-fidelity prototype. Only some of the related process of cognitive psychology for the development of final prototype will be described and evaluated. The research of current issues with mobile application/ website design will be mentioned in the relevant paragraph and how the main result of the research will be used for final prototype will be explained. Using the design principle, the final high-fidelity prototype will be developed and evaluated. 1.1 User profile The personalized game that is going to develop is aiming for the new staff members of the ABC institution and the local community to get familiar with the key local services and area of interest. The main user of this game will be newly recruited staff of the institution and the local community to support them to recognize the local services such as traditional restaurant, computer service center or mobile shop and area of interest such as shopping mall, pagoda and museum etc., around the neighborhood. The potential user group of the game will be of age 15 to 40 years old both male and female. The user of the game will expect to have quick learning of the services and interesting area around the institution such as restaurant, shopping mall, mobile shop, pagoda/ church, museum, etc. The game is currently only available on iOS mobile device and will try to produce more versions for android and others.
  4. 4. Interaction Design Coursework April 2017 [4] 1.2 Game Scope This personalized game for ABC institution is free to play with iOS version for now and will release more version after the success of the first version. The main function of the game is to help the new staff of the institute and local community to get familiar with the key local services and area of interest. Since the main purpose of the game is to help the user to get familiar with the local services and interesting areas, these will be marked on map and users can easily get access to it. The search function will also be provided to help the users to search the places by name or address. The design will be made simply so that the users of different ages can use it without any difficulties. In case the user made any mistake, the game will display clear error message and will show a way to restore to normal stage. For example, if the user fail to type a username and click to go forward, the system will show an error message.
  5. 5. Interaction Design Coursework April 2017 [5] 2. Cognitive psychology 2.1 Critical discussion of cognitive psychology and key issues Cognition means the mental works which we become familiar with things and get knowledge. Processes mainly include understanding, remembering, reasoning and attending. Cognitive psychology is a psychology branch which focuses on people working out with the information. In another word, cognitive psychology is learning of what is happening in our mind. The cognitive processes are interdependent with each other. For example, when you are browsing a website you need to have attention on the content, read and memorized it and try to remember it. It is unusual of the processes to happen separately. The below cognitive psychology processes are more related to development of mobile application rather than other processes. Attention Attention is the process of selecting thing to focus on at a point in time among the other things which is around us. It involves the audio and/or visual senses. Attention make us to focus on information which is relevant to what we been doing. Focused or divided attention enable information to be stand out in competing stimuli and limiting the ability of knowing all events. The information at the interface should be structured to capture the users’ attention. Perception “Perception refers to how information is acquired from the environment, via the different sense organs (e.g., eyes, ears, fingers) and transformed into experiences of objects, events, sounds, and tastes.” (Roth, 1986). The perception process also involves other processes such as memory, attention and language. It is important for the designer to present the information in a way that can be readily perceivable. For example, the two websites function equally well, the chances are user will recognize and most likely to revisit the one with better design. Memory The memory process involves recognizing and then recalling knowledge. Content is also important in affecting the peoples’ memory. It is impossible for people to remember everything that they see, hear, smell, taste, etc., as the brain could be overloaded. Encoding is the first stage of processing in memory which determine what information are attended to in the environment and how it is interpreted. There are two main type of memory; short-term memory known as working memory and long-term memory.
  6. 6. Interaction Design Coursework April 2017 [6] The most possible issues could happen with the personalized game of ABC institution are as follow: Over-use of graphic To gain user attention, the developer use technique like animated graphic, color, underlining, etc. But, using all of these technique in one interface will result in making the user encounter confusion and it will fail to get user’s attention. Too many information in one screen The cluttering interface such as putting many text, color and sound in one screen will result in distracting and annoying the user instead of getting user attention. The user will probably not get any information from a cluttering interface. Mismatch color combination The color used on screen for background, text, buttons etc., should be readable, distinguishable. The color used should be eye-friendly, matching color. For example, it is difficult to read the yellow color text with white background. Poorly design interface Design plays an important role when it comes to developing an application. The application with good, well-structured design will likely to have more user attention than the bad design one. For example, the user will recognize the beautifully designed website rather than a cluttering and bad design website. Importance of significant design People tend to easily forget things which are not significant. It is critical to make important thing stand out from others so that the user can memorized it. For example, putting the importance things first, highlighting them, repeating them in different places, etc.
  7. 7. Interaction Design Coursework April 2017 [7] 2.2 Evaluating the usage of cognitive psychology To have better understanding of the cognitive psychology and how it can be embedded in the real-world applications, I would like to present the following two mobile application, Telenor Myanmar and Ooredoo Myanmar. These applications are used mainly for checking mobile bill balance and buy new internet/ voice packs. The below two picture of it will be used as examples. Telenor Myanmar Ooredoo Myanmar Attention The user will mainly be expected to know their mobile bill balance by using the application. In both application, they use different style to gain user attention but they both focus on the main balance of the mobile user. In Telenor Myanmar application, the icon used are clear enough to be readable by user of all age. And the icons are shown together with text to avoid misunderstanding of the used icon. But in Ooredoo Myanmar application, although they show the main balance of the mobile in clear picture, the icon used are unclear, smaller than it should be and difficult to read for elders. Logo Icon with Text Logo Icon with Text
  8. 8. Interaction Design Coursework April 2017 [8] Perception and Recognition To enhance the perception of the application both of the applications uses the color scheme which is representative of their logo. In Telenor Myanmar application, although they use nice background and the right color scheme, most of the icon are not reflective to the real-world objects. Some user may find it difficult to recognize the icons. And some of the icon text are not fully displayed. In Ooredoo Myanmar application, the background color and design is good, but the icon are also not reflective to the real-world objects which may result in difficult to recognize. Memory In both application, it is designed to minimize the user’s memory load by making the offered services visible and the icons are with clear captions. Their logos are being display well, so that users of the application can easily memorized and it will also help promote the brand image.
  9. 9. Interaction Design Coursework April 2017 [9] 3. Issues in mobile design 3.1 Current mobile design issues research With the emerging use of mobile nowadays, many mobile app are developed. The following are some of the common issues that interaction design developer should be aware of when developing the design of their application. Inaccurate Clicks Nowadays, all most all the mobile handset become touchscreen and people use their fingers to click the things on the screen. With the small size of mobile screen, the clicks are not accurate rather than using the keypad phone. This is also known as “fat finger problem”. While developing a mobile application the designer has to think about the size and proximity of all the clickable elements. The designer has to make sure there is enough space between clickable elements and they are large enough to touch with human finger. Complex Design When developing a design for mobile app, it is important to meet the user requirements, rather than providing additional functions. The mobile app developer must stick with their primary objective and make sure not to clutter the interface with unnecessary objects like icons and symbols. Small Screen The small touch screen of the mobile device is one of the thing to consider when developing mobile application design. The small size of the screen tends to make the user difficult to read the full context and user will have to scroll down to view for more texts if the app show many information in one interface. For example, when the users have to fill up a very long form and they need to keep scrolling for more text, it will result in the user dissatisfaction and they might forget the title of the form and purpose of filling it. Single Window Although some mobile handset support multiple window at the same time, the limited size of the mobile screen make it difficult, even with today’s larger-screen phone. The user cannot split the screen as in desktop/ laptop and work on different app concurrently. So, any of the mobile task should be easy to complete within single app or website. If user have to switch between screen to get the require information, it is likely that they will need to copy and paste it otherwise their memory will be overloaded and it will result in more complex and error prone with the interaction.
  10. 10. Interaction Design Coursework April 2017 [10] Unstable Connection Even in nowadays, the cellular network or Wi-Fi coverage are not universally good. The developer need to consider the significant waiting time and should design interfaces which are light, yet contain much information as needed. This can reduce the data loading time and the user will be more satisfied using the application. Non-standard GUI Controls The basic GUI widgets such as command links, radio buttons, check boxes, scroll bar, etc., have its own appearance and behaviors. The design developer should not change the usages of its because doing so will confuse the users. For example, when choosing the gender of the user, only one can be choose and radio button must be used for this.
  11. 11. Interaction Design Coursework April 2017 [11] 3.2 Avoiding the current issues To develop a perfect personalized game for the ABC institution, the common issues of mobile design which are mentioned above should be avoided. 1. There should be clickable large enough space between elements for the convenience of fat finger users. This can also avoid the accidently wrong clicks that users would probably made while using the app. 2. A simple design would be the best design and it will help user recognize more and the app will become user-friendly for all different ages of users. Putting too much information in one interface should also be avoided. 3. The small screen size of the mobile handset is always an issue, despite of nowadays big screen handsets. But, the mobile screens are still a lot smaller than compare to desktop or laptop. By this matter, the information that need to be included in the personalized game shall be consider carefully and will have to arrange systematically. 4. Since this personalized game is mobile base, it will mainly be used with cellular data network. When using the cellular data network the data loading time is one of the issues to consider because it is directly related to the performance of the application.
  12. 12. Interaction Design Coursework April 2017 [12] 4. Design Principle 4.1 The use of design standard Visibility of the system status As per Jakob Nielsen principles, the system should inform the status to its user within reasonable time with an appropriate feedback. For example, showing the download/ upload progress with a progress bar, a feedback message when an action is done, showing progress bar while the application is being load, etc. Consistency and standard According to one of Nielsen’s principles, “consistency and standard”, the design used for the interface should not make the user confuse by using different word or command for the same thing. Having the consistency result in efficiency and promote effectiveness of the application. Help user recognize, diagnose and recover from errors As suggested by Jakob Nielsen, the error message should be expressed in plain language without the error code which is not easy to understand for the users. In addition, the error message should describe why it is not correct and how can the user overcome from it. Match between system and the real world In Jakob Nielsen Design Principle, it was mentioned as while developing design for an app or website, words or phrases of the users’ language should be used rather than using system usage phases. User Control and freedom According to Jakob Nielsen’s design principle, the user often chose wrong system functions accidently, therefore “Emergency Exit” should be given to avoid unwanted state. On mobile touch screen the full size of the screen is clickable element and user will definitely make wrong clicks time to time. A confirmation to every action will prevent the mistake but it will annoy the user quickly. The undo or redo actions should be supported.
  13. 13. Interaction Design Coursework April 2017 [13] 4.2 The method used Hierarchical Task Analysis Hierarchical Task Analysis (HTA) is one of the task analysis models used to evaluate interaction between the user and the system by breaking down the main task into subtasks. From the task analysis, we can understand how users perform tasks and how they think they do it. 0. Welcome Screen 1. Record the username 1.1. If username is null, display error message 2. Main Screen 3. Browse shopping mall, restaurant or theater 4. Search for more options Hierarchical Task Analysis (Graphical) Welcome Screen Record User Username Error Main Screen Browse Search
  14. 14. Interaction Design Coursework April 2017 [14] 5. Conclusion 5.1 The high-fidelity prototype Based on the above mention cognitive psychology issues, mobile phone design issues and design principles the high-fidelity prototype for ABC institution is developed. Just in mind application and adobe photoshop application were used in the development of final prototype. Fig. 1 Welcome Screen Fig. 2 Record Username Fig. 3 Username Error Fig. 4 Main Screen
  15. 15. Interaction Design Coursework April 2017 [15] 5.2 Evaluation of the final prototype Applying Cognitive Psychology in final prototype Attention – the logo and icons used are made very clear and attractive to gain users’ attention. The icons are mentioned together with text and used with real-world metaphors. The fonts used are all the same and consistence between screens. Perception – to help enhance the perception of the game the eye-friendly colors are used and it is beautifully designed. The real-world objects such as shopping cart, foods, etc., are used to represent in icons where users can easily recognize what it is meant for. Memory – rather than displaying too many searching function for the user in one screen, only the main local services and interesting area are shown to avoid the memory load of the users. The users can use the advance search function for more information they wanted. This will make the user feel easy and comfortable as they do not need to recognize many functions. Icons are shown with text Real-world objects are used.
  16. 16. Interaction Design Coursework April 2017 [16] Following the design principles Visibility of the system status – to system must inform the user the progress of it according to the visibility rule from Nielsen design principle. The progress bar is being used in the welcome screen to inform the user that the system needs some times for loading. So that, the user might not confuse whether the system is progressing or freezing. Consistency and standard – for all the screens, the same colors and the same fonts are being used to have consistence design and to avoid user confusion. Having consistency will result in the enhance usability and promote user experience. Help user recognize, diagnose and recover from error – since all the screen of the touch mobile is clickable the user might probably click by mistake and it will lead to unwanted situation. In personalized game of ABC institution, if the user go forward without entering the username, the system will show an error message. It is important to give the user the detail of the error and a way to solve it with a clear message rather than system- oriented terms. Progress bar Clear and user-friendly error message
  17. 17. Interaction Design Coursework April 2017 [17] Match between system and real world – as per the Jakob Nielsen’ design guideline, the user-friendly words and picture were used. This bring advantage for users, that they do not have to learn the new thing and can instantly recognize the function of the system. User control and freedom – the exit button is provided for the user if they would like to quit from the application. 5.3 Summary The high-fidelity prototype for ABC Institution was developed with the cognitive psychology theory and issues, current issues with mobile design and Jakob Nielsen’s 10 general principle for interaction design. Upon launching the final personalized game, some multimedia such as sounds and images will be used. The final prototype was evaluated, describing how the cognitive psychology was applied and how the design principle was followed. Hierarchical Task Analysis (HTA) method was used to describe the task analysis of the system. User-friendly words and objects The exit button
  18. 18. Interaction Design Coursework April 2017 [18] 5.4 Reference To complete this coursework the following book and website were referenced. - “Interaction Design: Beyond Human-Computer Interaction” book, written by Yvonne Rogers, Helen Sharp and Jenny Preece, copyright 2002 John Wiley & Sons, Inc. - https://baymard.com/blog/mobie-design-limitations - https://www.nngroup.com/articles/mobile-ux/ - https://www.quora.com/What-are-the-most-common-issues-with-mobile-app- interface-designs - https://developer.apple.com/ios/human-interface-guidelines/overview/design- principles/ - http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5 - http://www.techrepublic.com/article/consider-these-design-issues-when- developing-mobile-applications/ - https://www.nngroup.com/articles/ten-usability-heuristics/
  • michaelnawa1

    Oct. 15, 2019

UOG Coursework 2017

Views

Total views

3,006

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

131

Shares

0

Comments

0

Likes

1

×