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.

NayLinnKo_BIT_InteractionDesign

2,506 views

Published on

The academic report for Interaction Design Subject by Nay Linn Ko.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

NayLinnKo_BIT_InteractionDesign

  1. 1. INTERACTION DESIGN COMP- 1649 Page 1 Student Name: Nay Linn Ko UOG Student Register ID: 000898709 Coursework Title: Interaction Design COMP 1649: Interaction Design Due Date: 17th April 2015 Centre: KMD (Yangon, Myanmar)
  2. 2. INTERACTION DESIGN COMP- 1649 Page 2 Acknowledgement First of all, I like to acknowledge the responsible persons from University of Greenwich who provide this coursework for students. I would like to thanks to all the authors and researchers who researched about Interactive Web Design. Moreover, I would like to present my appreciation for our lecturer, Mr. Francis Murphy, for his great and expert lectures and guidelines. Last but not least, I would like to thanks to responsible teachers and staffs from our centre, KMD for providing such a good learning environment.
  3. 3. INTERACTION DESIGN COMP- 1649 Page 3 Table of Contents 1. Introduction................................................................................................................................5 1.1 Investigating Current Issues in Mobile Design..............................................................6 1.2 How to Avoid the Issues in the Prototype ....................................................................7 1.3 Summary .......................................................................................................................7 2.Applying Cognitive Psychology for the Prototype...................................................................8 2.1 Key Issues of Cognitive Psychology in Mobile Website Design ..................................8 2.1.1 Understanding Cognitive Psychology...............................................................8 2.1.2 Importance of Cognitive Psychology in Mobile Website Designs.................8 2.1.3 Issues of Cognitive Psychology in Mobile Website Designs .........................8 2.2 Evaluating Cognitive Psychology Used in Similar Mobile Websites .........................10 2.3 Using Human Cognition in the Prototype....................................................................12 3. Choosing Multimedia...............................................................................................................13 3.1 Types of Multimedia that Could be Used....................................................................13 3.2 Evaluating Multimedia Used in Similar Mobile Websites ..........................................13 3.3 Justifying Chosen Multimedia for the Prototype.........................................................14 4. Justifying Design Principles and Methodologies...................................................................16 4.1 Design Principles .........................................................................................................16 4.1.1 Justifying Chosen Design Principles for the Prototype ................................16 4.2 Methodologies..............................................................................................................17 4.2.1 Justifying Chosen Methodology ...................................................................17 5. Developing High Fidelity Prototype.......................................................................................18 5.1 Feasibility Study and Foundation ................................................................................18 5.1.1 Interviewing the Potential Users...................................................................18 5.1.2 Usability and User Experience Criteria ........................................................19 5.1.3 Applying Researched Results in Final Prototype .........................................20 5.2 Design and Build Iteration...........................................................................................21 5.2.1 Conceptual Design (Site Map) for the Prototype .........................................21 5.2.2 Drawing Low Level Prototype .....................................................................22 5.2.3 Evaluating Low Level Prototype ..................................................................24 5.3 Engineering..................................................................................................................25 5.3.1 Developing High Fidelity Prototype Using Software...................................25
  4. 4. INTERACTION DESIGN COMP- 1649 Page 4 5.3.2 Evaluating High Fidelity Prototype ..............................................................26 5.4 Testing..........................................................................................................................31 5.4.1 Feedback from users .....................................................................................31 5.4.2 Checklist for High Fidelity Prototype...........................................................32 5.5 Missing Things and Further Enhancement .................................................................32 5.6 Summary......................................................................................................................32 6. Conclusion ................................................................................................................................33 7. References.................................................................................................................................34 Appendix.......................................................................................................................................36
  5. 5. INTERACTION DESIGN COMP- 1649 Page 5 1. Introduction The use of mobile devices such as tablets and smart phones are increasing dramatically because of their portability and multi-function features. A lot of information could be accessed online by using mobile devices. According to “Electronic Commerce (2008) A Managerial Perspective” by Efraim Turban, wireless computing using mobile devices provides ubiquity, convenience, interactivity, personalization and localization. We are going to develop a high fidelity prototype mobile website for mobile smart phones. Mobile phones are chosen because of their popularity in the market. A lot of people use smart phones more than PCs and tablets. The mobile website will enable people to search especially academic institutions, along with local amenities, such as medical centres, places of worship, shopping malls and places to eat and stay. It would also provide an approximate cost where applicable. The name of the website would be “Myanmar Academic Institutes Directory”. The mobile website will be focused for Android OS. This is because most of people are using Android platform rather than iOS, Windows Phone, Blackberry etc., Due to the broad market of Android phones, we chose Android platform for our prototype. While developing the mobile website, human-device communication channel is required to consider. Human-device communication channel which depends on users’ memory, mental model, device portability and screen size must be considered in designing stage of the mobile website.
  6. 6. INTERACTION DESIGN COMP- 1649 Page 6 1.1 Investigating Current Issues in Mobile Design Mobile websites which can give good UX, interactivity and convenient usability is known as responsive sites (RWD) (Ref: http://netobjects.com/mobile-site.html ). There are some issues in designing the mobile website as mobile websites are being used increasingly. Some of these issues are following. Screen Size A lot of mobile devices such as tablets or smart phones are different in screen size. A mobile website must be reliable with all of these different screen sizes. Mobile Browsers Another issue is about mobile browsers. Some mobile website features are not suitable or appear in some browsers. Navigation In the past, navigation on sites was horizontal along the top of the page, or sometimes down the left of a page. It now needs a more consideration for mobile phones. Images and Icons Images and icons should also be as flexible as possible to ensure that graphics on high-pixel-density devices. Data Tables Data tables are being problematic issues in mobile websites, particularly when they have to contain complex information or simply a large number of rows and columns. Testing Another issue is about testing. As we know there are a number of mobile devices with different platforms, we need to consider how to test, what device to test with. There would be huge cost of building a test suite of devices. Testing Time Testing time is also an issue. It will be time consuming to test a mobile website with a lot of mobile devices. Time is assumed as money. Redesigning Redesigning old fixed-width website for mobile version is also an issue.
  7. 7. INTERACTION DESIGN COMP- 1649 Page 7 (Ref: http://blog.usabilla.com/15-responsive-web-design-problems-dont-want ) 1.2 How to Avoid the Issues in the Prototype We need to build the website that automatically adjusts to any mobile device screen. Using intelligent software, the website can adjust to mobile devices with different screen sizes. The mobile website needs to automatically load the correct layout and resolution with customized font and images that are “retina-ready”. A lot of countries such as New Zealand, internet signals are still relatively slow and expensive. Therefore, we also need to consider data loading time. Using adaptive images serve images appropriate to the size of the user’s screen so users are not downloading large file- size images designed for desktop computers. Testing the website on various mobile devices is critical. Full screen navigation, usually accessed via a button or navigation icon, is currently developing in mobile website design. Many designers are starting to implement full screen navigation designs when viewing the website on mobile devices. Storytelling option in mobile website is a powerful tool that can be used to understand what the website is. The user can perceive the road map or structure of the website. Telling about the website as a story gives the visitor more satisfaction. It helps to build more of an emotional attachment to the website. (Ref: www.zingdesign.com/tag/responsive-website ) 1.3 Summary We will develop a high fidelity prototype of a mobile website named “Myanmar Academic Institutes Directory”. The mobile website is focused for Android OS. We investigated current issues in mobile design and how the result feed into our mobile website prototype. And, we critically discussed how to avoid the mobile design issues in our final prototype.
  8. 8. INTERACTION DESIGN COMP- 1649 Page 8 2. Applying Cognitive Psychology for the Prototype 2.1 Key Issues of Cognitive Psychology in Mobile Website Design 2.1.1 Understanding Cognitive Psychology Cognitive psychology is how the people learn and think about things. It is about the way people conceptualize things. Norman (1993) distinguishes two kinds of cognition; experiential and reflective cognition. Experiential cognition is a state of mind in which we perceive, act and react to events effectively and effortlessly (for example, reading, having a conversation). Reflective cognition involves thinking, decision making and problem solving. Cognitive processes can also be described into specific kinds. They are-  attention  perception and recognition  memory  learning  reading, speaking and listening  problem solving, planning, reasoning and decision making 2.1.2 Importance of Cognitive Psychology in Mobile Website Designs The cognitive processes are independent from each other. Several cognitive processes could be involved in a single activity. For example, when we find particular information in a website, we need to attend the key words, perceive, and read it, think about it, and then try to remember it. Therefore, cognition involves a range of processes. Cognitive Psychology is critically important in designing the mobile websites. If two websites that function equally well are presented to someone, that person would prefer the nicer looking design. Using cognition in the websites would lead to get repetitive visits from the users. (Ref: Preece, Rogers, Sharp (2002) “Interaction Design”) 2.1.3 Issues of Cognitive Psychology in Mobile Website Designs There are some issues in mobile website design deal with cognitive psychology. Some of these issues are described as follow. The issues are referenced from www.bijucreative.com/about/psychology . Issue 1- People prefer reading on paper than on a screen. Cognitive Psychology- Attention Most people do not like to read on a mobile screen as the screen size is generally small. It is also difficult to pay attention. Therefore, we need to try to reduce the amount of text on the website as possible. Short messages will be more effective than long messages.
  9. 9. INTERACTION DESIGN COMP- 1649 Page 9 Issue 2- Sustained attention lasts only 7 to 10 minutes. Cognitive Psychology- Attention A number of people can give sustained attention for only 7 to 10 minutes. Base on this knowledge, the mobile website would be required to display critical information to users within 7 to 10 minutes. Issue 3- People use physical appearance as an indicator of quality, and prefer nice designs over the purely functional. Cognitive Psychology- Perception and Recognition Most of the people think that something that looks nice must also work well. If two websites that function equally well are presented to someone, that person would recognise the nicer looking design. Issue 4- People forget things that are not significant. Cognitive Psychology- Memory We need to understand what is important in our website design. It is critical to make important things appear larger than unimportant things, or highlight the important things with different colour. Otherwise the user will forget easily about the important information. Issue 5- People are difficult to memorize a set of numbers such as phone numbers. Cognitive Psychology- Memory People are very easy to forget the numbers (for example- phone numbers, bank accounts). Therefore, when we are going to provide some numbers in the website, broken down into chunks of 3 or 4 items would be useful. For example, “09-430-400-43” would be easier to memorise than “0943040043”. Issue 6- Our minds wander one-third of learning time. Cognitive Psychology- Learning When we are learning something, our attention could not be concentrated all the time. For example, when we are reading on the website, we might be thinking of what to buy at the grocery store. One of the solutions is to add a lot of hyperlinks in our website, but allow the users to always know where they are in relation to our website. Issue 7- Certain colour combinations are more difficult to read. Cognitive Psychology- Reading, Speaking and Listening Some colour combinations on the website are very difficult to read. For example, imagine blue texts on red background. The best colour combination for the easiest readability might probably be black text on white background.
  10. 10. INTERACTION DESIGN COMP- 1649 Page 10 Issue 8- Most decisions are made unconsciously. Cognitive Psychology- Decision Making Some people are not aware that their decisions are affected by social pressure or motivation from other people. Therefore, we have to know that the decisions of people can be changed by the environmental factors. 2.2 Evaluating Cognitive Psychology used in Similar Websites As an inexperienced interface designer, evaluating the existing mobile websites is the best way to know the mistakes and responsive designs. The following two mobile applications, Brilliant Directory and Sm3 Directory would be used to evaluate how cognitive psychology is embedded in. Brilliant Directory Sm3 Directory
  11. 11. INTERACTION DESIGN COMP- 1649 Page 11 Attention In Brilliant Directory, icons are shown together with texts. This can enhance the user attention and could be easily memorized. The icons are not shown together with the texts in Sm3 Directory. Both of the applications include the essential needs for users but some icons are difficult to understand. Users might confuse what the icons actually meant, consequently, this can impact users’ attention. Perception and Recognition Some icons or metaphors used in Brilliant Directory are from real world. By using interface metaphors from real world, the perception and understanding of the users would be improved. There are no logos or images of organisation or places in describing the organisations or places in both applications. Memory According to Miller’s 7+_2 theory, the icons shown in a web page should be 6 to 9. Users would confuse which icons are the most essential ones if there are many icons. Users may also difficult to memorize the important icons. In Brilliant directory, there are a lot of icons in a single page, making user difficult to memorize. Moreover, in each application, there is no scrollbar to pull down. We should provide scrollbars in a web page otherwise the users would be difficult to remember where they are, at the top of the page or bottom of the page. Difficult to understand the icons Real world metaphors A lot of icons are used in single page. No scrollbar
  12. 12. INTERACTION DESIGN COMP- 1649 Page 12 2.3 Using Human Cognition in the Prototype Applying the cognitive psychology in our mobile website prototype is a key to produce responsive or interactive product. Followings are the way how we use cognitive psychology in the mobile website prototype.  Displaying beautiful and satisfactory background surface, animations and sound effects in the website can catch up users’ attention and improve recognition.  It is critical to make important things appear larger than unimportant things, or highlight the important things with different colour.  Describing images and maps of destinations (such as medical centres and academic institutes) can improve not only attention but also learnability of the user.  Because of the small display of mobile devices, we should not use a lot of text that makes users head ache. We should use images or other multimedia tools rather than texts.  The arrangement of web pages and icons should be carefully considered otherwise the users will be difficult to explore the website.
  13. 13. INTERACTION DESIGN COMP- 1649 Page 13 3. Choosing Multimedia 3.1 Types of Multimedia that Could Be Used Multimedia is a content that combines different media forms such as texts and images. Multimedia is recorded or displayed by electronic devices. By using different multimedia types in mobile website design, the users can perceive the information vividly. Generally, multimedia can be divided into linear and non-linear multimedia. Linear multimedia is a kind of multimedia with no navigational control for the viewer, for example, cinema presentation. Non-linear multimedia allows viewer to control interactivity, for example, computer games. There are a number of multimedia types. They are text, audio, image, animation, video, or other interactivity devices. (Ref: www.wikipedia.org/wiki/Multimedia ) 3.2 Evaluating Multimedia Used in Similar Mobile Websites Brilliant Directory Sm3 Directory
  14. 14. INTERACTION DESIGN COMP- 1649 Page 14 In Brilliant Directory, multimedia such as images, icons and metaphors are richly used. Each icon used in the website makes the user understand the meaning. The interface metaphors are applied together with texts. Audios and video are not applied. In Sm3 directory, multimedia such as icons and images are applied but are not well organised. Unlike with Brilliant Directory, icons and interface metaphors are not described together with the texts, making the user difficult to understand what the icons mean. As in Brilliant Directory, it does not include audio and video supports. Based on these researched knowledge, we are going to develop high fidelity prototype for “Myanmar Academic Institutes Directory”. 3.3 Justifying Chosen Multimedia for the Prototype Here we will describe about different multimedia options that are going to be used in our final prototype. Texts Text is a kind of basic multimedia. Displaying texts on the mobile websites which interact with the users to get information is critically important. We should provide different languages in our mobile website. Still Images Still images or single static images are very useful to provide information to the user. By displaying images of academic institutions, medical centres and shopping malls, the website can be improved not only in term of effectiveness, but also in user experience. Animations Animation is the process of creating motion pictures. It is the rapid display of a sequence of static images. They are very important in web technology. Using animations will enhance the interesting of the users. Metaphors and Icons By using metaphors and icons in the mobile website, users can understand the website easier. Users can better understand the concept that we want to give. Interface metaphors can enhance the satisfactory of the users. Based on the idea used in Brilliant Directory, we would combine the icons and texts to enhance user to understand.
  15. 15. INTERACTION DESIGN COMP- 1649 Page 15 Maps By providing the maps of academic institutions, restaurants and shopping malls, the effectiveness and user experience of the user will be improved.
  16. 16. INTERACTION DESIGN COMP- 1649 Page 16 4. Justifying Design Principles and Methodologies 4.1 Design Principles Throughout the development process, we should consider about design guidelines and standards which are provided by professional organisations. These guidelines and standards are known as design principles. Guidelines and Standards are critically important. This is because guidelines and standards are derived from practical experiences of what has worked well or badly in the past. A number of guidelines and standards are provided by different organisations, for example, Microsoft and Apple (platform based), ISO and IEEE standards, and professional bodies such as W3C and the British Computer Society. Among them, we would use W3C guidelines throughout the development process of the prototype. 4.1.1 Justifying Chosen Design Principles for the Prototype The following are design guidelines from W3C for mobile website design. They are referenced from www.w3.org/2010/09/MWABP . (Accessed 9th March 2015) 1. Reduce Data Loading Time  Reduce file sizes of images and animations.  Try to compose background images and navigation bars in line with CSS style sheets. 2. Limit text size  Limit the text size.  Heading texts should not be larger than twice the size of paragraph text. 3. Limit the number of different colours used on a page.  Different colours lead users to be difficult to read.  Do not use background images on mobile web pages. 4. Be consistent  Use consistent design.  Use common colour, banner and backgrounds.
  17. 17. INTERACTION DESIGN COMP- 1649 Page 17 5. Design for Flexibility  Design to be used by different devices.  Reduce complex data.  Keep the website simple. 4.2 Methodologies There are different methodologies that could be applied to develop the final prototype. Some of the methodologies are-  Structured Systems Analysis and Design Methodology (SSADM)  Rapid Analysis and Design (RAD)  Dynamic Systems Development Method (DSDM) 4.2.1 Justifying Chosen Methodology We chose DSDM methodology to develop the high fidelity prototype of “Myanmar Academic Institutes Directory”. The followings are the reasons why we chose DSDM.  The report must be finished on deadline date and DSDM can help us because it is time constrained method.  By using DSDM, we can build iteration which is not allowed in SSADM.  Misunderstanding and false decisions are corrected earlier.  DSDM is very easy to apply to small and medium business systems.  DSDM is user driven methodologies. (Ref: Jennifer Stapleton (1997) “Dynamic Systems Development Method”)
  18. 18. INTERACTION DESIGN COMP- 1649 Page 18 5. Developing High Fidelity Prototype 5.1 Feasibility Study and Foundation 5.1.1 Interviewing the Potential Users The possible user types of “Myanmar Academic Institutes Directory” mobile website would be-  Students and possible students from Myanmar  Travellers In this part, I would like to describe the interviews with an academic student and traveller. The interview questions were based on interviewees’ experience of using similar websites - “Brilliant Directory” and “Sm3 Directory”. Interview type would be semi-structured interview. This type of interview is guided by a script but interesting issues can be explored in more details. Here are the questions and their answers during interview. The questions are based on the concept of mobile web design issues, cognitive psychology, multimedia and design guidelines. Because the interviewees do not understand cognitive psychology or guidelines, we did not mention directly. Question Student Traveller Do you like surfing internet using mobile phones than PCs? (mobile web issue) Yes No Do you always search information you need via mobile phones? (mobile web issue) Yes Yes Do you want mobile version of websites to have “Story telling or Site map” option? (cognitive psychology) Yes Yes Do you want to view its map while you are searching a destination? ? Yes Do you understand the icons that used in “Brilliant Directory”? (cognitive psychology) Yes ? Do you understand the icons used in “Sm3 Directory”?(cognitive psychology) No ? Do you like images used in “Brilliant Directory” such as Pagodas? (guidelines) No Yes Do you like images used in “Sm3 Directory”? (guidelines) Yes Yes Do you think the websites should have audio and video files? (multimedia) ? Yes Do you think the websites should provide to download audio and video files? (guidelines) No ? Here are other interesting issues discussed with interviewees in details.  The traveller said that the icons used in Brilliant Directory are easier to understand than in Sm3 Directory because the icons are shown together with texts.  The student does not prefer to use images which can impact religious and cultural conflicts. (For example- The image of the pagoda used in Brilliant Directory.)
  19. 19. INTERACTION DESIGN COMP- 1649 Page 19  The student wants to view videos online via mobile phones but it would need faster internet speed.  Because of huge file sizes of video files, both of the interviewees do not want to download video files via mobile phones. The knowledge got from the interview results will be applied in the high fidelity prototype. 5.1.2 Usability and User Experience Criteria Developing a set of usability and user experience criteria is critical in requirement gathering. Later these criteria could be used to measure the system. Usability and user experience criteria could be set in DSDM methodology. We will develop a set of usability and user experience criteria which are measurable. Attribute Name Loading Time Measuring Concepts Easily transfer one website page to another page. Measuring Methods Time that need to transfer one page to another. Allowed Worst Case 15 seconds Planned Level 10 seconds Best Case 5 seconds *Note that Data loading time is also depend on mobile browser. Attribute Name Time to search an academic institute (Effectiveness) Measuring Concepts User can search required information fast and easily. Measuring Methods Time that need to search an academic institute. Allowed Worst Case 2 minutes Planned Level 1 minute Best Case 30 seconds Attribute Name User Satisfaction Measuring Concepts User satisfaction with our website compared to another similar website. Measuring Methods Ratio of user questionnaire scores Allowed Worst Case Two websites are equally preferred. Planned Level Our mobile website 20% preferred over another website. Best Case Our mobile website 50% preferred over another website.
  20. 20. INTERACTION DESIGN COMP- 1649 Page 20 5.1.3 Applying Researched Results in Final Prototype Throughout the developing stage of final prototype, we are going to apply the cognitive psychology, multimedia and the guidelines that are discussed in the above sections. These research results will improve not only the usability effectiveness but also the user experience of “Myanmar Academic Institutes Directory” mobile website. We are going to develop the high fidelity prototype mobile website for mobile smart phones. Mobile phones are chosen because of their popularity in the market. The mobile website prototype will be focused for Android OS. This is because most of people are using Android platform rather than iOS, Windows Phone, Blackberry etc., How Cognitive Psychology should be used? The texts and icons should be used simple and clear. The error messages should also be easy to understand. The important information should be displayed with larger texts. We should not use colourful background image which can impact the reading. The arrangement of web pages should be simple and easy to learn. How Multimedia should be used? We should provide different languages in our mobile website. Interface metaphors or icons will be applied richly together with the texts to enhance user understanding. Images of academic institutions, along with local amenities such as places to eat and stay will be displayed. The map of the academic institutions and its amenities will also be provided. We will provide audio files in some places. Video files are not preferred because of the file sizes. How Design Principals and Guidelines should be used? According to W3C guidelines for mobile website designs which are discussed in above 4.1.1 section, background images will not be used on our mobile web pages. We will limit the text size and colour that used on our final prototype. It is also required to reduce data loading time as possible.
  21. 21. INTERACTION DESIGN COMP- 1649 Page 21 5.2 Design and Build Iteration 5.2.1 Conceptual Design (Site Map) for the Prototype
  22. 22. INTERACTION DESIGN COMP- 1649 Page 22 Critical Scenario Through this report, we are going to explain the following critical scenario, which is the most important by normal flow. Task Analysis for Critical Scenario 0. Home Page 1. Go to Regional Institutes List Page 1.1 Go to Academic Institute Page 1.2 Go to “List of Hospitals” Page (Local Amenity Page) 1.3 Go to “Hospital” page (Particular Hospital) 1.4 View Hospital Information
  23. 23. INTERACTION DESIGN COMP- 1649 Page 23 5.2.2 Drawing Low Level Prototype The following low level prototypes were drawn based on the knowledge of issues in mobile phone websites design, cognitive psychology, multimedia and design guidelines which were discussed in above sections. The issues found in similar mobile phone websites were considered and are tried to avoid while drawing low level prototypes. Home Page List of Academic Institute Page Academic Institute Page Interaction Type that we are going to used in “Myanmar Academic Institute Directory” would be Instructing. Instructing is interaction by means of commands and selecting options. Home PageNavigation Search Button Multimedia usage (Image) Scroll Bar (Cognitive Psychology) Icons along with texts Academic Institute Lists Back Button (Cognition) Consistent Web Template (W3C Design Guideline) Alternative text (W3C guideline) Academic Institute Page Using Multimedia (Audio, Image) Academic Institute map Icons along with texts (Cognition)
  24. 24. INTERACTION DESIGN COMP- 1649 Page 24 Instruction 1. Home screen is appeared. The user clicks on “Yangon Division” button. 2. The list of academic institutes in Yangon Division is displayed. The user clicks on “Yangon University” button. 3. “Yangon University” page is shown. The user can choose its local amenities, hospitals, places of worships, shopping malls, places to eat and stay. 5.2.3 Evaluating Low Level Prototype The issues of mobile website designs are tried to fix in the low level prototypes. Navigation icon is used in order to be easy to use and avoid the issue of navigation bar in mbile websites. By clicking navigation icon, the user can view the “story telling” option which explain the flow or the site map of the website. By using consistent web template, the images and icons in the website are flexible to different screen sizes. Cognitive psychology deal with mobile website desgin is also fed in the prototype. The icon “>” is used to display the link to another page. Using scroll bar, deals with cognitive psychology, the user can easily know where he is and where to go next. Icons are shown together with the texts and the users can easily understand what it is meant. By showing logos of the academic institutes, the users can easily recognise the institutes that they find without recalling. Multimedia such as images of academic institutes, icons of local amentities, audio explanations and logos of the academic institutes and the maps are richly used in the above low level prototype. According to W3C guidelines for mobile website design, consistent web template such as common background color, common banner and icons are used. Alternative text buttons are used in order to hide a lot of texts on the web page and to get more spaces. The images used in the website would be smaller than 100 pixels. Remark: This is not the final evaluation. We are going to add more options into the prototypes and make more specific evaluation after developing high fidelity prototype. Summary The knowledge based on issues in mobile phone websites design, cognitive psychology, multimedia and design guidelines were fed into drawing low level prototype. After that, we evaluated the low level prototypes.
  25. 25. INTERACTION DESIGN COMP- 1649 Page 25 5.3 Engineering 5.3.1 Developing High Fidelity Prototype Using Software Based on the low level prototype, the high fidelity prototype of “Myanmar Academic Institute Directory” was developed as following. The application that was used to develop the high level prototype is Axure RP Pro 7.0. Home Page List of Academic Institutes Page Academic Institute Page (For all the pages of high fidelity prototype, see Appendix.) Using Multimedia (Audio, Image) Search Button Navigation Academic Institute Page Back Button (Cognition) Academic Institute Logo (cognition) Multimedia usage (Image) Academic Institute map Alternative text (W3C guideline) Local Amenities Icons along with text (Cognitive Psychology) Consistent Web Template (W3C Design Guideline) Icons along with texts Scroll Bar (Cognitive Psychology)
  26. 26. INTERACTION DESIGN COMP- 1649 Page 26 5.3.2 Evaluating High Fidelity Prototype How Cognitive Psychology is applied? Attention The texts and sentences used in the “Myanmar Academic Institute Directory” are simple and easy to understand for the user. Icons are shown together with the texts so that users can understand what the icons are actually meant. To maintain attention of the user, consistent web template such as common background colours and banner are used. The overall design of the website is simple so that user can easily concentrate. Perception and Recognition The names of the academic institutes are shown together with their respective logos. These logos can help if the users do not remember the institute name. The users can easily recognise without recalling. Moreover, the use of “>” sign can be easily perceptible that there is a link to another page. Icons are shown together with texts Consistent Web Template “>” sign makes easy to understand. Institute names are shown together with logos
  27. 27. INTERACTION DESIGN COMP- 1649 Page 27 Memory By looking scroll bar, the users can remember where they are, at the top of the page or bottom of the page. The numbers such as phone numbers are broken down into chunks so that users can memorise easily. By looking at the page title, users can easily remember where they are. Learning Peoples’ mind wander one-third of learning time. Therefore, we provide alternative texts or hide texts to pretend the paragraph is short, attracting users to read it. If someone who does not want to read the texts, we provide audio version of the academic institute information. Page title shows where the user is. Phone number in chunks Scroll bars make users to remember where they are Alternative or Hided text Audio version makes easy to learn
  28. 28. INTERACTION DESIGN COMP- 1649 Page 28 Reading, Speaking and Listening We mentioned that certain colour combinations are difficult to read in section 2.1.3. Therefore, we used black texts on the white background. The text sizes are limited so that the users can read easily. Heading texts are two times bigger than normal texts in order to support easy reading for users. What multimedia types are provided? Image Images of academic institutes and their local amenities are displayed. The logos of the academic institutes are also shown together with the name. Audio Mp3 file format is used to provide audio. The audio files are applied to give the information of the academic institutes. Texts As the texts are basic multimedia type, we use texts in the prototype richly. Headings are two times bigger than normal text Black texts on white background
  29. 29. INTERACTION DESIGN COMP- 1649 Page 29 How W3C guidelines are followed? 1. Reduce Data Loading Time To reduce the data loading time, we tried to limit the image sizes not to over 200 pixels. The consistent web template (common navigation, banner) is used so that we can compose different web pages in a CSS style sheet to reduce the data loading time. 2. Limit Text Size The paragraph text size in the prototype is fixed. According to the W3C design guidelines, the heading texts are two times larger than paragraph texts. 3. Limit the number of different colours used on a page. Certain colour combinations such as blue text on red background are very difficult to read for the user. In our “Myanmar Academic Institute Directory” mobile website prototype, we use black texts on white background. We did not use different colours on a web Image sizes not to over 200 pixels. Consistent Web Template Headings are two times bigger than normal text
  30. 30. INTERACTION DESIGN COMP- 1649 Page 30 page. We use blue for icons, scroll bars and buttons. Moreover, background images were not used because of the different colours. 4. Be consistent Consistent web template such as common background colour, common banner, navigations and icons are used. Consistent web design can enhance usability and user experience for the users. 5. Design for Flexibility Although above high level prototypes are focus for mobile smart phones, other mobile devices such as tablets and note book can be used flexibly. By using CSS style sheet, we can adjust the width and height of the web pages. No background images Used blue color mostly Consistent Web Template
  31. 31. INTERACTION DESIGN COMP- 1649 Page 31 Missing things and further enhancement There are a lot of missing things deal with mobile website issues, cognitive psychology, multimedia and guidelines in our high fidelity prototype. After analysing checklists and feedback from users, we are going to discuss about which issues are remaining? What needs to be done in further enhancement? See the section 5.5, page no. 21 for detail discussing. 5.4 Testing 5.4.1 Feedback from Users There are some feedbacks for the high fidelity prototype from the possible users, student and traveller. Feedbacks deal with Cognitive Psychology The student mentioned that because of too many steps, it is difficult to find the local amenities of an academic institute quickly. The users can lose their attention to find a local amenity as there are too many steps. There are no animated icons and therefore the website is not perceptually fun to use. Audio files are only provided in English and it is difficult to listen for other language speakers. Feedbacks deal with Multimedia According to the traveller, we should provide different languages while describing information using texts. Moreover, the traveller mentioned that short documentary films about academic institutes should also be provided. Feedbacks deal with Design Principals The traveller said that there are a lot of white spaces in high fidelity prototype. And, the white colour is represented something lost in some traditions and cultures. Another point that the student mentioned is about image sizes. Some image sizes are more than 200 pixels and this will take time for data loading.
  32. 32. INTERACTION DESIGN COMP- 1649 Page 32 5.4.2 Checklist for High Fidelity Prototype In this part, we would like to discuss about how much the high fidelity prototype has met the usability and user experience criteria. To meet usability and user experience goals is very critical in designing the mobile websites. We asked the possible users, student and traveller to give their ratings on these criteria. No. Usability and User Experience Criteria Rating 1. Having good user interface design 1 2 3 4 5 2. Easy to learn (learnability) 1 2 3 4 5 3. Easy to remember how to use (memorability) 1 2 3 4 5 4. Easy to search the academic institute 1 2 3 4 5 5. Fun to use 1 2 3 4 5 6. Cognitively stimulating 1 2 3 4 5 According to the users’ feedbacks, we can assume that the high fidelity prototype has good usability but it is difficult to get user satisfaction. 5.5 Missing Things and Further Enhancement Although the high fidelity prototype of “Myanmar Academic Institute Directory” was generally accepted by users, there is some missing points deal with cognitive psychology, multimedia and mobile website design principles. Here is some of these missing points for further enhancement.  Audio files about academic institutes are only provided in English so that we need to provide other languages.  Short documentary films about each academic institute should also be provided.  The prototype must be included animated icons otherwise it will not perceptually fun to use. The website will not be cognitively stimulating.  Some images are larger than 200 pixels and this will take time for data loading.  According to W3C guidelines, we must reduce the white spaces on the web page as we can. 5.6 Summary The high fidelity prototype was developed by DSDM methodology. In feasibility and foundation stage, we apply the researched results and existing applications. We also interviewed the potential users. In designing stage, we produce the conceptual design for the prototype. And then, we created the low level prototype for “Myanmar Academic Institute Directory”. The high fidelity prototype was developed in engineering stage. The evaluation for high fidelity prototype deal with mobile issues, cognitive psychology, multimedia and W3C guidelines was made. Finally, we discussed about missing things and further enhancements for the high fidelity prototype.
  33. 33. INTERACTION DESIGN COMP- 1649 Page 33 6. Conclusion The high fidelity prototype for “Myanmar Academic Institute Directory” was created in relation to cognitive psychology and W3C mobile web design guidelines. The issues in mobile design were tried to solve in the high level prototype. The different multimedia types were also used in the high fidelity prototype. Then, the high fidelity prototype was evaluated in order to know what are missing or needed to be enhanced. These missing things and further enhancements were set as future plan due to the lack of lime. However, the interactive web design of “Myanmar Academic Institute Directory” would be useful for the users.
  34. 34. INTERACTION DESIGN COMP- 1649 Page 34 7. References Book References Efraim Turban, (2008) Electronic Commerce A Managerial Perspective Available from: www.pearsoned.co.uk (Accessed Date: 1st March 2015) Preece, Rogers, Sharp, (2002) Interaction Design (Accessed Date: 3rd March 2015) Jennifer Stapleton, (1997) Dynamic Systems Development Method (Accessed Date: 16th March 2015) David Benyon, (2010) Designing Interactive Systems (Accessed Date: 12th March 2015) University of Greenwich, B.Sc (BIT) COMP 1649, Interaction Design Website References Responsive Web Design http://www.zingdesign.com/responsive-website-design-cheatsheet1 (Accessed Date: 3rd March 2015) Mobile Website Design http://netobjects.com/mobile-site.html (Accessed Date: 3rd March 2015)
  35. 35. INTERACTION DESIGN COMP- 1649 Page 35 Cognitive Psychology on Web http://www.bijucreative.com/about/psychology (Accessed Date: 5th March 2015) Mobile Web Application Best Practice http://www.w3.org/2010/09/MWABP (Accessed Date: 10th March 2015)
  36. 36. INTERACTION DESIGN COMP- 1649 Page 36 Appendix List of Hospitals (Local Amenity Page) Hospital Page (Particular destination page)

×