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.

Interaction Design

1,774 views

Published on

Interaction Design

Published in: Technology
  • Be the first to comment

Interaction Design

  1. 1. Course Title: Interaction Design Course work ID: COMP1649 Submitted to: Eur Ing Dr Mary Kiernan Greenwich Coordinator Submitted by: Md. Mahbub Alam ID No: 000788896 Daffodil Institute of IT, Bangladesh Date: January 11, 2016
  2. 2. COMP1649 – InteractionDesign 1 Table of Contents 1. Introduction:..................................................................................................................................2 2. Cognitive psychology and users .......................................................................................................3 2.1 Cognitive processes considered while designing the prototype ....................................................3 2.2 Cognitive frameworks consideredwhile designing the prototype.................................................6 3. DesignPrinciples.............................................................................................................................7 3.1 Consistency & Familiarity...........................................................................................................8 3.2 Simplicity..................................................................................................................................8 3.3 Accessibility ..............................................................................................................................8 3.4 Efficiency & Usability.................................................................................................................9 3.5 Grid..........................................................................................................................................9 3.6 User accommodation ..............................................................................................................10 3.7 Fitt’s Law ................................................................................................................................10 4. Methodology................................................................................................................................10 5. Reasoning for the use of Multimedia Applications...........................................................................11 5.1 Device ....................................................................................................................................12 5.2 Multimedia type......................................................................................................................12 5.3 Conceptual Design...................................................................................................................13 5.4 Low Fidelity Prototype.............................................................................................................14 5.5 High Fidelity Prototype............................................................................................................15 6. Design..........................................................................................................................................17 6.1 Layout ....................................................................................................................................17 6.2 Color ......................................................................................................................................18 6.3 Images....................................................................................................................................18 6.4 Navigation ..............................................................................................................................18 6.5 Grid........................................................................................................................................19 6.6 Button Functions.....................................................................................................................19 6.7 Icon Metaphors.......................................................................................................................19 7. Evaluation....................................................................................................................................19 8. Conclusion....................................................................................................................................22
  3. 3. COMP1649 – InteractionDesign 2 1. Introduction: The aim of this coursework is to design a high fidelity multimedia prototype mobile website suitable for phone or tablet that provides essential information for the new tourist. The application will allow new tourist to preview different facilities available in location for new tourist such as- find local landmarks, shopping, places of interest, medical center(s), places to eat and others information etc. In order to make this a successful project, the following current key issues for interaction designs will be taken into consideration and will be documented properly-  Cognitive psychology- In this part it has been discussed how cognitive psychology influences the way users will interact with the system.  Established Design Principles & methodologies- This part include a complete discussion containing the effective use of established design principles and methodology that will be used to design the high fidelity multimedia prototype.  Inclusion & Rationale for the use of multimedia contents- This part includes discussion on what type of multimedia content will be used in the prototype and why those have been used.  Evaluation techniques- This part includes a detailed discussion on the evaluation of the developed high fidelity prototype. In the next pages, all of the above points have been clearly discussed in a logical order and finally a conclusion has been drawn.
  4. 4. COMP1649 – InteractionDesign 3 2. Cognitive psychology andusers Cognitive psychology defines how a person processes information when it comes to that person. This includes reading, thinking, remembering, learning, problem solving, decision making etc. Which are famous as cognitive processes? Cognitive procedures are two types- experimental cognition and reflective cognition. Experimental cognition includes attention, perception, thinking, remembering etc. Reflective cognition includes problem solving, planning, decision making etc. (Jennifer Preece, 2007) Cognitive psychology now an “is a must’ factor when designing an interactive application to provide users a better and efficient system and enhance user experience. We will also have to consider the above mentioned cognitive processes, while developing the high fidelity prototype for the new tourist. There are also several cognitive frameworks which are used to predict and explain human behaviors for interactive designs. We will also have to consider some of those frameworks while developing the prototype. This part includes conversation about the cognitive processes and cognitive frameworks that have been considered while developing the high fidelity prototype. 2.1 Cognitive processes considered while designing the prototype There are mainly six cognitive processes (includes both experimental and reflective cognition processes) that have been considered when the prototype had been developed. These processes can be interdependent which means that several processes may be required for any give tasks. (Jennifer Preece, 2007) 2.1.1 Attention As the users of the application will be mainly new tourist, they will be expecting information about courses suitable for them, local landmarks, places of interest, shopping, medical center(s), places to eat and other information etc. When displaying
  5. 5. COMP1649 – InteractionDesign 4 this information, it needs to keep in mind that, now-a-days the users want an application neat and simple. So, this material will have to present in the prototype in such a way that the users’ won’t have to click for several times to find their specific material. In the home page of the application, all the necessary information for the new tourist will have to be listed in category-wise. For instance, the prospective tourist will be looking for local landmarks, places of interest, shopping, medical center(s), places to eat and other information etc. On the other hand, new tourist will be looking for local landmarks, places of interest, shopping, medical center(s), places to eat and other information etc. Now, if these topics are listed together it will create a muse and the visitors will get confused. Dissimilar techniques like animated graphic, icons, colors, ordering of items etc. will have to use effective so that the users get attracted easily. As the application will be used in phone or tablets, so the screen size has to be responsive. In this limited space, all the information will have to represent in such a way so that the screens are not cluttered and the space are properly used. Also, when it is necessary texts will have to exchange by proper images and icons. 2.1.2 Perception Perception refers to how users will acquire information from the application, via the different sense organs (e.g. eyes, ears, and fingers) and will convert into experiences of objects, events and sounds. This process involves other cognitive processes such as memory, attention, language etc. To ensure that users are able to correctly perceive the importance of the information presented to them, the following points need to be considered-  The icons and other graphical illustrations will have to use carefully so that the users are able to understand their meaning.
  6. 6. COMP1649 – InteractionDesign 5  The abstracted visual illustrations will have to clearly labeled; also grouped items will have to be spaced well and defined by borders, instead of colored backgrounds.  Texts will have to be legible and distinguishable from the background. 2.1.3 Memory Memory refers to the recalling of knowledge that allows users to act up appropriately. Memory can be two types- recognizing and recalling. It has been found in exploration that, users are much better at recognizing things rather than recalling things. To promote appreciation the following things can be done-  It will have to ensure that user is not required to undertake complicated tasks to acquire his desirable content.  The interfaces will have to design by using menus, icons, and consistently placed objects. Only commonly used icons will be used rather than familiarizing new type of icons. The menus and other objects will also be placed or designed in such a way that the users are used to.  The use of icons, buttons and links had better work in a familiar way. 2.1.4 Learning Users tend to learn through doing, rather than reading, therefore the interface should encourage exploration, but also guide users into selecting the most proper actions. This can be achieved by using proper icons or images or buttons for searching, apply for surfing etc. 2.1.5 Reading, Speaking & Listening Reading, speaking and listening are related to language processing which have both similar and different assets. For instance, the sentence "This is the era of technology." essentially has the same meaning whether the user reads it, speaks it, or hears it. On the other hand, the easiness with which users can read, listen, or speak varies depending on the person, task, and context. As the application will be a web application for phone or
  7. 7. COMP1649 – InteractionDesign 6 tablets, the main issue will be regarding the ability to read the text on screen. The app will have to provide opportunities for making text large on a screen, without affecting the formatting, for the users who find it hard to read small text. The quality of images also will have to be taken into consideration for this factor. 2.1.6 Problem-solving, Planning, Reasoning, Decision-making All these cognitive processes are reflective cognition. They provide discerning about what to do, what the choices are, and what the consequences might be of carrying out a given action. The main concern surrounding problem-solving and decision-making is that a user of the prototype should be able to make quick decisions. The interface should not be complex that the user must figure out how to use it, before they advance. For example, if the user can’t find a desirable content in the home page, the application should have the proper searching function for the users (e.g. searching form/ A-Z searching index etc.). Some standards and conventions will also have to follow while developing the prototype so that the users will be able to quickly adapt to using the interface. For instance, familiar icons such as the standard “back” and “forward” icons should be used when viewing image slides. 2.2 Cognitive frameworks considered while designing the prototype There are five main cognitive frameworks in relation to interaction designs; on the other hand three of those have been discussed below will be taken into consideration for the prototype. 2.2.1 Mental Model Mental models are the conceptual ideas that the users have regarding how to use the system and how the system works. This can be based on assumptions or actualities. If the users of the system could develop better mental models of interactive systems, they
  8. 8. COMP1649 – InteractionDesign 7 would be in a better position to know how to carry out their tasks efficiently and what to do if the system started acting up. (Jennifer Preece, 2007) For that purpose, the interface for the prototype should aim to follow standard concepts, by providing spontaneous ways to interact, with clear directions and where necessary (e.g. providing sitemap of the site), context relevant guidance. Additionally, the application will require providing the right kind and level of information in the form of clear and easy-to follow instructions. 2.2.2 Theory of Action This framework is related to the concepts of “gulf of execution” and “gulf of evaluation”. This is a goal driven framework. A user has a goal, they decide how they will attain it, and they perform actions. They then receive response from the interface they have used to perform the actions, they construe the Material they receive and evaluate whether the information received has met the original goal. The main goals of visitors of the web app will be to preview suitable course, with an underlying possibility to use website. The aim of the web application should be to easily allow users to view the desired contents. Besides the above frameworks, there is another cognitive framework named external cognition which is concerned with clarifying the cognitive processes involved when the users interact with different external representations. (Jennifer Preece, 2007). Basing on the above discussion, finally it can be said that if these points are kept in mind during the design and development of the application, the prototype will be a good application for the new tourist. 3. DesignPrinciples To produce an effective web application, it is mandatory to look into design ideologies which are set as standards for designing any kinds of application. By effectively following the well-established design principles it will likely to develop a better designed
  9. 9. COMP1649 – InteractionDesign 8 prototype which the users will find more friendly and usable. The design principles that will be taken into considerations for designing the prototype are described below. 3.1 Consistency & Familiarity The key factors in a good user interface are consistency & familiarity. The UI of the prototype application will have to be consistent across all parts of the application, from navigation to color terminology which is generally known as internal consistency. However the prototype’s user interface will also have to be consistent with its context, such as other applications in its group. The UI guideline for the application will have to define earlier to ensure the consistency. (Jovanovic, 2010) It will have to ensure that the UI contains some contents (e.g. icons) which are used to to the users. Familiar user interfaces draw on concepts from the users’ previous experiences and use suitable metaphors. Envelops, for example, are a well-known metaphor for email services. If other that envelop icon is used in the prototype, the users will get confused and will be discouraged to use the application. 3.2 Simplicity Simplicity is one of the basic design principles for user interface design. The simpler a UI, the easier it is to use. However, the prototype should not be built comprising less functionality in order to keep the UI simple. Rather, a balance will have to be kept between functionality and simplicity. Restraint is one of the most efficient ways to achieve this balance: i.e. Finding the simplest way to solve a problem. (Jovanovic, 2010) 3.3 Accessibility This is a very important principle for designing the prototype. This is related with maintaining standards while including images, colors and texts size. The texts size
  10. 10. COMP1649 – InteractionDesign 9 should be big enough (but not too big, cause that would look odd), so that other than normal users like people with less eye-sight won’t have to try hard to read content. Similarly appropriate background colors, fonts etc. will have to use in the prototype so that it is accessible by users with disabilities. Furthermore, the World Wide Web Consortium (W3C) develops and maintains the protocols used on the web to ensure interoperability to promote universal access which we will have to follow in order to make the application more accessible to the users. The application will also have to be responsive, so that if a user does not access the application with phone or tablet, the contents adjust and display properly just like table PC’s screen. 3.4 Efficiency & Usability Users should be able to be efficient when using the application because the users will use the application hoping to get information easily and quickly. If the users find the application too complex to use, it won’t be efficient for the users at all. UI’s should allow users to be efficient and should focus them on completing tasks in the easiest and fastest way. Usability is another vital feature that will have to keep in mind during designing of the application. The application will have to consist of all the useful features that may be required by the new tourist. Any unnecessary information should be avoided so that the application does not become too clumsy with information. Relevant useful functions, for example, appropriate course searching function, online registration function etc. should be included in the application. 3.5 Grid Grids are very important factor of the design principles which are generally used to group certain information together with the application to make it clear to the users. In
  11. 11. COMP1649 – InteractionDesign 10 addition, by implementing grid in the application would give the application a better structure and would make the information more understandable to the user’s senses 3.6 User accommodation User accommodation refers to how supple the system is the ability to identify the UI or providing different techniques to achieve the same goal for various levels of skill; how aesthetic the interface is; the niceness of the system - is the feedback polite, appropriate, does it make the user want to join in. 3.7 Fitt’s Law The use of Fitt’s Law will have to take into consideration while making the application. According to this law, the users’ will be provided large buttons which will be well spaced and well defined menu options to interact with the application. The layout order and the button style also will should to be same for each content type. 4. Methodology In order to complete the prototype web application successfully, the RAD (Rapid Application Development) application development methodology will be used in this project. The RAD approach requires minimal planning in favor of rapid prototyping. (Wikipedia, 2008) As the aim of this project is to make a prototype mobile website for new tourist, so it can be said that RAD is appropriate approach for the project. RAD involves iterative progress and the construction of prototypes. There are number of stages that need to be carrying out in order to create a good quality prototype. The phases that will be carried out are clearly included below.
  12. 12. COMP1649 – InteractionDesign 11 o Research & requirements planning phase- In this stage, a thorough research about cognitive psychology and number of design principles will be done in order to help with designing the prototype. Later, the requirements of the prototype will be gathered and detailed planning will be documented for the project. o System design phase- This stage will include the information design and user interface design of the application. From the information gathered in the research & requirements planning phase, a rough layout of the prototype will be created, which will show an idea of how the navigation or information would be laid out within the application. Images and icons will also be collected and the style of the low fidelity prototype will be designed, in order to get a better vision of the final outcome. o Development phase- Once the design of the final application is completed, a prototype creator named “Just-in-Mind” application will be used to develop the final high fidelity prototype. During the development, every time a new functionality of the high fidelity prototype is done, it will be compared with the work done in requirement analysis phase and design phase. If anything wrong is found then it will be corrected immediately. In this iterative way, the testing of the final prototype will be done automatically and chances of doing anything wrong will be lessened. If the above stages are followed properly, it can be said that it will very possible to make the project successful. 5. Reasoning for the use of MultimediaApplications This part contains the rationales about the device the application will be used for and the multimedia contents which will be used in the application. Also, this part includes
  13. 13. COMP1649 – InteractionDesign 12 the conceptual model of the application, low fidelity prototype and the final high fidelity prototype. All the things are clearly described under the below. 5.1 Device The device chosen to be used to create for the application is the iPad device. The main reason to choose the device is because the users will have access of this application not just from using desktop but also on the iPad or even in mobile devices. Besides, it is proficient for the user to obtain information easily and can access the application from anywhere as now-a-days internet access from mobile devices has become a common fashion. The layout and structure of the application on the iPad will be slightly smaller than it would in a desktop as the height and weight of the hand held device are smaller. So the information within the context will have to be kept as simple and get the aim of the application right to the point. This will reduce the chance of user needing to scroll down. By applying these it will help to lessen the problems for user getting annoyed and will able to obtain the information faster. 5.2 Multimedia type The types of multimedia that will be used for the prototype application will be mainly still images and icons. Still images’ format will be JPEGs and PNGs. Video file’s format will be in the MPEG-4. Some users tend to have a better memory in remembering visual images and icons, rather than plain text or any other forms of media. The use of consistent metaphors throughout the application will help making it easier for the users to remember all of the functions. The application will consist of images of location where little description
  14. 14. COMP1649 – InteractionDesign 13 will be on condition that right below them, to provide users with various different visual methods of gathering information. Icons that will be used in the app will have to be relevant and familiar to the users. For example, to provide the functionality of choosing Map facility to the users, appropriate symbol (such as, Google Map icon) will have to use in the application. At the home page of the application, a slide show of different images will be used. Appropriate techniques should be included in the slider to view the pictures. Such to view next image of the slider “next” icon will have to use, to view an image for long time pause option will have to deliver. 5.3 Conceptual Design In this part the key requirements for the prototype has been identified and an abstract model has been drawn. The following image depicts a high-level use case which explains the main functionalities of the application from the user “tourist” perspective. Student What is best here Looking for Places to Eat Shopping See available local landmarks Look for Medical Center Figure 1: Conceptual Design for the prototype.
  15. 15. COMP1649 – InteractionDesign 14 5.4 Low Fidelity Prototype This part includes a low fidelity prototype for the final application. This has been drawn from ideas gained and information researched based on the subject selected. Below is a scanned image of the planned layout structure designed:
  16. 16. COMP1649 – InteractionDesign 15 Figure 2: Low fidelity prototype. From the above drawing we can see the five basic page design of the final prototype. The pages are: “Home Page”, “Places to Eat Page”, “Shopping Page”, “local landmarks Page” and “Medical Center Page”. 5.5 High Fidelity Prototype This part contains the high fidelity prototype of the final application which has been created on the basis of the above low fidelity prototype. The high fidelity prototype has been created using “justinmind” prototype tool. The pictures of some main pages are included below.
  17. 17. COMP1649 – InteractionDesign 16 Figure 3: Home page of the high fidelity prototype. Logo Search Language Main Menu Social Icon Slider Places to eat Medical center info Welcome video introduction Shopping centers Google Maps to find places Information Tabs Others information linked for user need Tab DescriptionUseful Links Newsletter subscription Copyright information
  18. 18. COMP1649 – InteractionDesign 17 6. Design This part includes the description of the designs that has been implemented while producing the prototype. Different critical factors are clearly pointed out below. 6.1 Layout As the device selected for the application is iPad, so the design of the layout is a very important factor to take into consideration. The appearance of the application will be greatly affected if the proper layout is not maintained. The selection of wrong layout will lead users to have negative views towards using the application. Whereas if the layout design is done appropriately, the users will get great pleasure while using it and this would help to increase the use of the application. There are many things to be considered but the most crucial factors are headings, position of the navigation, the style of the images and texts. Generally the heading size has been made big and bold so that it becomes noticeable and catch user’s eye. The navigation of the application needs to be placed in such a place where it would be easily seen by users. Additionally, functions would need to be implemented such as change of background color, change of color when hovered, underlined etc. To make the navigation clearer to user the current page they are on. The size and style of the images are has been included in proportionately the size of the iPad as the device is smaller than desktop screen. To properly represent the information appropriate font should be used and adjust it to the background color. The application should use white space intelligently, as the use of white space, as white space allows good spacing between elements, allowing them to be easily understood by the users.
  19. 19. COMP1649 – InteractionDesign 18 6.2 Color Proper color has been be used for fonts, images, icons, background of application, buttons, fonts etc. All the colors have been chosen maturely. Regarding to the design principle “accessibility”, color is an important issue as the color used within the application could affect people with visual disabilities. This issue has been considered very seriously. 6.3 Images The home page of the application includes a slide show of different images of tourist, location. The users will be able to get an overview of the by seeing the slideshow. The size of the images is based on the apple guideline for high resolution on iPad (144px x 144px). The images have been edited using Adobe Photoshop to provide better quality images to users. 6.4 Navigation The navigation links of the application has been placed in standard position- at the top right after the logo. This is done in order to make it more noticeable to users, enabling the users to simply just carry out the tasks and lead them to the information they needed at a faster stride. The navigation has been kept consistent and besides the main navigation, more links has been provided inside the page to enable users to become quickly familiar with how to make their way around the system and to prevent confusion/frustration. The enable users to be aware of what page they were currently on, the link that the user currently is on will be highlighted a different color from the other links. Additionally, as the application is just a prototype, the languages offered only consist of two, which is English and French.
  20. 20. COMP1649 – InteractionDesign 19 6.5 Grid Appropriate grids has been used within the application in order to give it a strong structure and to allow the grouping of information where needed. Two or three columns grids have been used for the whole application. This was a design principle adapted to by Apple. 6.6 Button Functions Many buttons has been used in the total application. All the buttons has been placed in proper places and used only when necessary. The buttons have been designed by following conventions used in other applications, to help aid familiarity to users, in order to help them carry out tasks effectively. 6.7 Icon Metaphors The icons used within the application in different part of the application are used in many well-known applications. For example, only widely used icons has been used in the video and image slides as controls which are also used in other media players. Using these well-known icons to carry out functions within the media player allows for users to bring over their knowledge and experience with how to use them and carry out their tasks effectively. Additionally, this aids familiarity to the users and enables them to quickly come to terms with how to use the functions that has been provided in the application provided. 7. Evaluation The aim of the coursework was to develop an interactive application for the new tourist. The purpose of the application is to provide new tourist the best and easiest way to collect relative information they require.
  21. 21. COMP1649 – InteractionDesign 20 As the production of the system has been completed, it’s high time to evaluate the overall development procedure of the application. Are the interactive devices (e.g. buttons) appropriately sized and spaced for touch screen use? The interface of the system has been developed by following Fitt’s Law, by providing users with large buttons which are well spaced and well defined menu options. The layout order and the button style is the same for each content type. The images show the well sized buttons and in the case of the content page, the spacing between buttons, ensuring that the user has less opportunity to select the wrong option. Is the design consistent throughout the application? All of the pages within the web application follow a consistent format for navigation and other functionalities. The main navigation choices are provided at the top of the screen and images have been used only in some particular places. The only fault of the design is the fixed footer. The drawback of using a fixed footer means that when viewed on a smaller screen (such as an iPhone), the footer floats, and occasionally covers content. Does the application use familiar icons and terminology? The icons used throughout the application are pretty common and users will easily recognize those icons. For example, for image slideshow appropriate control symbols has been used. The very same controls have been used for videos which are generally used different media players. Is there perceived affordance for the interactive elements? The interfaces of the application use common forms for both navigations and actions (e.g. buttons). Because of this a perceived affordance and expectation has been met for
  22. 22. COMP1649 – InteractionDesign 21 the user. Buttons has been carefully used and can be clearly distinguished from the background on the preview pages. Are buttons, text, images suitably visible? Buttons, texts and images has been presented in the different pages in such a way so that those are clearly visible to the users. Appropriate fonts, font-sizes, font-color, background colors has been used to make this possible. Is the menu system simple? The navigation of the application is pretty simple and has been organized in a regular fashion. Only six parts has been used and clearly highlighted, so the users will be able to identify those easily. Is the use of color within the interface appropriate? Black is the main color of the application. Also, gray, white, green, yellow etc. has also been used for different components for the application. Because of using these colors, the contents are clearly visible to users.
  23. 23. COMP1649 – InteractionDesign 22 8. Conclusion From the above discussion it can be said that, the application interface meets the majority of the evaluation criteria, as defined against the design principles adopted. The primary concerns of usability, in terms of navigation, visibility of buttons for previews and consistency in design/function have been met through the design. If the prototype were turned into a fully functional product, the users of the application would be greatly benefitted. Finally, it can be said that the project has been done successfully.
  24. 24. COMP1649 – InteractionDesign 23 Bibliography JenniferPreece,Y.R.H.S.(2007) Interaction design:Beyond Human-ComputerInteraction,3rd edition, NewYork:John Wiley&Sons,Inc. Jovanovic,J.(2010) Designing User InterfacesForBusinessWeb Applications,25thFebruary,[Online], Available:http://uxdesign.smashingmagazine.com/2010/02/25/designing-user-interfaces-for- businessweb-applications/ [10Nov2013]. Wikipedia(2008) Rapid application development,October,[Online],Available: http://en.wikipedia.org/wiki/Rapid_application_development [13Nov2013]

×