User Interface Design - Assignment Example

User Interface Design – Individual Report Introduction: This is the report as per the requirement of Project 2505ICT. Our group has chosen the following topic: Using prototypes in User Interface Design. In this report, we will try to present how we designed our site for the project. The Design Process: We started with the three part design process given by Kristof and Satran (1995) – which divides the design process into : Information Design, Interaction design and Presentation design. Information design : In this step, we basically define our product. To do so, we collect, analyze and group and finalize the information about our goals. Thus we chose our topic and browsed for information regarding this topic. The critical tasks of information design are Defining the goals for the product; Defining what the audience wants to do ; To decide how the product will reach its audience; Choosing the authoring tool ; Creating a content inventory list ; Creating a project plan ; Organizing the content and finally producing a content flowchart. Our goal was to create a website that is able to present the information in a more interesting and interactive way for first year students. Since our target audience is the first year students, the content was created to help them understand it in an easy manner. The students might also look for additional information, so we have provided the links and addresses of websites giving more information on the topic. Thus we created a content inventory list which included the content and information to the additional sources. Thus we defined the content keeping in mind the Grice’s Maxims (1975). According to Grice, the conversation or in our case the human computer interaction is based on the four maxims of Quantity, Quality, Relevance and Manner. The content is as it is relevant to students of first year. Care has been taken such that it is factually correct and there is no ambiguity or misrepresentation of facts. Our design should be such that these four maxims are not violated. Thereby we created our project plan and a flowchart to finalize our content and to simplify its usability. Thus finally, our content was organized in topics and subtopics. The content is relevant to the topic and is orderly, clear and concise. Interaction Design: The second step of interaction design is about converting information into a real show. Depending on the content, the amount of interaction required in a project is decided. The idea is to have a design which is clear, simple and easy to use. The critical tasks of interaction design are a guidance system to orient users ; the navigation and access routes ; defining the screens ; considering controls for interaction and creating a storyboard. Thus using Norman’s 7 stage human computer interaction model (1988) and his design principles, we worked on the basic guidance system. The basis of this model is that any action has 7 stages --- Forming a goal, Forming an intention, Specifying an action, Executing the action, Perceiving the state of the system, Interpreting the state of the system, Evaluating the outcome. Thus by setting an objective of creating a user interface for first year students, we have worked on further details as per the requirement. We have already collected information and content during our first step. In this step, we concentrated on making a good interactive user interface. The idea was to make things visible and create a fusion look between the look of an object and its function. The navigation design has been designed by keeping a simple structure such that there is minimum travel and depth and we have tried to minimize redundancy by avoiding multiple paths to the same place from the same screen. Thus we defined the screens and their controls Presentation design: This part shows how the website will actually look like. This covers the actual layout, color schemes, the typography etc for the site. The main point to remember is to keep these schemes simple and consistent. The critical tasks of presentation design are defining the visual theme and style; a system of screen layouts defining the structural elements of each screen; creating the control elements ; creating the media elements ; and creating prototype screens (A prototype is a preliminary, incomplete, on-screen or version of the product. It does not need to be fully developed because it needs to be tested before implementation). We have used PARC principles of visual design by Robin Williams (1994) The four principles are : 1. Proximity: Items that are related to each other are grouped together. Thus they look like one visual unit rather than several separate units. This helps in reducing clutter and organizing information properly. 2. Alignment: This is important as it helps in creating a visual connection between different elements on a page. This provides a clean and uncluttered look to the page. 3. Repetition: It is advisable to repeat some visual elements of the design. This could be in form of color, shape, texture, sizes, etc. 4. Contrast: This is to show dissimilar item in a way that is pleasing to the user. It helps in beautification of a page. Contrast can be created in many different ways, such as using a warm and a cool color or a big or a small font etc. The idea is to easily show the difference between two items. Using the same principles, we have tried to provide similar items with a sort of proximity to each other and have created a visual connection between similar items. We are using a blue color scheme throughout for our website with the fonts in black color from Arial, Helvetica, sans-serif font family. We have tried to design this in such a way that colors of similar darkness are not used next to one another. We have used white and blue backgrounds that are pleasing to the eye. And the font color has been kept at classic black which is easy to read. This site is basically a prototype where we have used a small quantity of data. But the overall presentation and layout will remain same after the complete data is loaded. Finally we have used GOMS Analysis to check the usability of our website. A GOMS model, (Card, Moran, and Newell, 1983), is a description of the set of tasks that a user carries out in order to check the usability of a system or device. It provides information on "how to do it" knowledge that is required by a system in order to get the intended tasks accomplished. The acronym GOMS stands for Goals, Operators, Methods, and Selection Rules. Thus is involves descriptions of the Methods needed to accomplish specified Goals. The Methods are a series of steps that the user performs. If there is more than one Method to accomplish a Goal, then we use Selection Rules that choose the appropriate Method depending on the context. Thus using this technique, we checked the usability such as the proper functioning of links and opening of web pages. On the final note, we have checked the accessibility of the site and it is opening well in Explorer as well as Netscape. References: Card, S., Moran, T. S. Newell, A. (1983). The Psychology of Human Computer Interaction Grice, H. Paul. 1975. Logic and conversation. In Cole, P., and J.L. Morgan, eds. Speech Acts. New York: Academic Press, 41–58. Kristof, R. and Satran, A. (1995). Interactivity by design : creating & communicating with new media. Adobe Press, Mountain View, California, USA Norman, D. A. (1988). The Design of Everyday Things. New York, Doubleday/Currency Ed Williams, R. (1994). The Non-Designer's Design Book. Peachpit Press. Read More