Lecturer Name: Rajya Lakshmi Gaddipati Subject Name: Interface Usability Subject code: ITC-504 Student Name: Ponnaganti Suresh Student Id: 11584127 Assessment Item-3 1 Interface Usability Design Online Gift Shop 2 Table of Contents 1. Design Overview ................................................................................................................... 3 2. Project Scope ......................................................................................................................... 3 3. Project Requirements ............................................................................................................. 4 4. Assumptions ........................................................................................................................... 4 5. Design Process ....................................................................................................................... 5 6. Interface Design ..................................................................................................................... 7 7. Usability Testing .................................................................................................................. 16 Bibliography ............................................................................................................................ 24 3 1. Design Overview The user interface is mainly designed for an online gift shop as well as the interface is also created in a way that the user might not face any types of difficulties to use the system (Astrom &Wittenmark, 2013). The interface design is created in the simple and attractive manner that helps to attract more numbers of customers to use the system. The emergence of e-commerce business mainly helps to all customers to view and buy the products in remote access and the important focus of interface design is mainly on the useability of prepared design. In this report, the home page is mainly created in order to show the top selling percentage and types of new products that mainly launched in the market. In the produced website, design the drop down menu of navigation bar have proper and user friendly labelling so that it helps the customer to visit any pages from the home page. The webs page design is prepared in a responsive manner so that user have no feel that they are getting redirected with navigation. 2. Project Scope The user interface is needed to be designed so that all customers can collects all types of vital details of the selecting products in a easy manner. All web pages are loaded in frequent manner to remain up-to-date regarding all information of available products and assist the customers to purchase the products from store. It also have the online support option in the master page so that the user mainly contacts the technical support and user guide support if they face any types of issues to do the proper usage of website. 4 3. Project Requirements The basic requirement of this project is mainly the creation of attractive user interface for an online gift shop so that it may helps the user to search the customized products and have the top quality shopping experience. In this, it also discussed about the created user interface that is mainly designed by doing the proper use of clear background and attractive font’s style and size. All newly launched gift items are displayed in the front page and the user need to create the successful login in the system to purchase the items. The user are get navigated to the destination page without getting any types of difficulties to find any types of unique gift items that need to be sold in the website. 4. Assumptions Some of the assumptions that are done to design the user interface of the online gift shop are mentioned below:  The online website is mainly used the group of users based on ideal conditions like the device from that the application will be opened is doing work in the proper manner.  It also not in power saver mode over and above also not under direct sunlight for the reason that it might affect the performance and readability of the application  All types of flash instruction and direction messages are mainly read by the user at the time of using the website that helps to have the proper knowledge about the internet surfing. 5 5. Design Process To design the user interface of online gift shop user interface prototype is mainly created based on the exact requirement and demands of customers (Confrey & Maloney, 2015). The prototype needs to be tested in relation to the optimal use and useability for the website development that is mainly required to be selected for the website development. Some of the important steps that are mainly involved in the designing processes are discussed below: Identification of the users and contexts- the identification of user group for doing the development and attraction of user interface based on the needs (Elston &Gowen, 2014). The user roles also need to have proper identifications based on the goals for ranking of system functionality. Structural Design and Navigation of Interface- the interface design need to be proper outlined and the scenario also to be outlined to do have the proper designing framework of the system. Prototype Design- the respondents need to get included to design the prototype of online gift shop and also required to get approved before starting the developmental work of the actual website. Compositional Interface Design- proper text format, graphics as well as elements need to get included in the interface (Hankammer et al., 2016). In this, the standard colour of website is also required to select so that the text can be in the user friendly and readable format and the short text also used in the manner so that user can read the content at a glance. 6 User Interface Specification- all the standards that are used to design the website is needed to have proper documented so that it can easily outlined the visual design and structure to design the webpage interface. 7 6. Interface Design 61. Screen layouts Figure 1: Home Page for the online gift Shop 8 Figure 2: Registration page for online gift shop 9 Figure 3: About Us page for online gift shop 10 Figure 4: Category drop down 11 Figure 5: Gift items sold on the website 12 Figure 6: Product details page 13 Figure 7: Gift items sold on the website 14 Figure 8: Product details page 15 Figure 9: Add to cart page 16 Figure 10: Payment page 6.2. Identification of all the components The figure 1 is the home page of the online gift shop and it consists of a three sections. The first section shows the new products that have arrived in the shop, the second section shows the products according to the category and the third section is kept for survey. The user can participate in the survey for sharing their views regarding the usage of the website. Moreover the user can connect to the social website such as Facebook or google plus by clicking the icons placed at the footer of the website. Attractive images are used for 17 making the design interactive and the design is kept simple to increase the usability of the website. The figure 2 is the registration page of the website where the user needs to register for purchasing a product or get the full functionality of the website. Some validations are used in the registration page for securing the user account such as in the create password field the user needs to give a password of minimum 4 characters otherwise a message would be displayed that the password should be 4 characters long. The user already having their account can login from the registration page and continue to the website. The figure 3 is created for the About us page of the company and here all the details about the stakeholders associated with the website is attached. The details of the business such as the head office of the company are also given in the website. Providing all the details in the about us page helps the company to maintain a transparency in the business and thus helping to build a better customer relationship and increase their business. This also helps the website to gain competitive advantage and increase their business. The figure 4 demonstrates the list of the items that comes under the category and the user can select any of the categories to redirect into the appropriate page and choose among the various ranges of products available in the website. The figure 5 shows the items with specific details that is sold on the website. The user can select the number of quantity they want to purchase and directly proceed to checkout or add to cart and continue with their shopping. The figure 6 shows the product details page of the items sold by the online gift shop. The technical details of the product are shown by clicking the see more product details option. The user can buy the product or add it to cart from this page also. 18 The figure 7 shows the items with specific details that is sold on the website. The user can select the number of quantity they want to purchase and directly proceed to checkout or add to cart and continue with their shopping. The figure 8 shows the product details page of the items sold by the online gift shop. For the non-technical products technical details are not available and instead of it other details related with the product is displayed on the screen. The figure 9 shows the add to cart page, when the user selects an item and adds it to cart the product is added with all the details such as the price and the shipment details shown on the webpage. Some recommendation is also provided to the users analysing the purchase behaviour to attract the customer for purchasing more products from the shop. The figure 10 is the final payment page of the website and here the user needs to input the address to get the delivery of the product. If the user is a registered user the address is displayed in the website and there is an option to add new address for the getting the delivery at different location. 6.3. Use of colours, frames and sections The uses of frames are mainly avoided to do the design of the user interface required for the online gift shop as the frame cannot get modified later as well as in the maintenance phase the developers mainly needs to do the replacement of frames to apply new changes and new looks in the website interface (Endsley, 2016). According to the context of this website, different types of light images and light background colours are mainly used to do the design of web interface. Apart from that, it also discussed that the design is mainly divided in different sections that mainly adds different messages and components in the website. 19 6.4. Help and user assistance functions This particular help and user assistance functions is one of the important features of the website that mainly increases the website usability (Hasan, 2016). Therefore, it also discussed that the feedback button os mainly kept at the webpage bottom like way that the user can get all types of required details and information and they also get the opportunity to provide reviews about the sold products and user-friendly nature of the website (Huang, Lin & Huang, 2013, July). Apart from that, the user can also have all types of valid information like company stakeholders, company balance sheet by navigating to the about us button in the navigation bar. 6.5. Use of icons In this website, all types of standard size icons are mainly used to have proper design of the web interface of the online gift shop. Jain, Taylor and Peschiera, (2012) discussed that to make easy navigation of the website all icons are also provided with appropriate labelling so that all users can have the proper understanding about different functionalities of the icons. In this website, images are prepared as clickable and can be embedded as icon to make the user visually get pleased. Apart from that, it also discussed that all types of icons are get easily identified and it also not required of translation so that all icons are get used more to do an types of interactive user interface design. 6.6. User task navigation The uses of unnecessary information are avoided such that the users are not distracted of using the website. The design of the interface is kept simple and use of extra graphical images and unnecessary registration is also avoided for increasing the efficacy of the user task navigation (Johnson, 2013). The price and the details of the products are displayed in the 20 website interface a proper heading for each of the page is required to be included such that the user does not get lost while using the website. 7. Usability Testing 7.1. Evaluation of aims The usability testing is one of the important parts of the user centred design of the online gift shop. To get an effective result the test is needed to performed at the time of design and the implementation phase (Kelly, Lesh &Baek, 2014). The design process of website can be divided into six different phases and also the designer needs to get back to the previous stage if any errors are get identified in the next stage as well as the correction of errors. The important stages that need to be identified to develop website as well the testing of errors are discussed below: Problem definition- In this initial stage all-functional specification for the project development and the requirements are collected. Analysis- In this phase, the website interface design is mainly developed based on the conceptual models and the proper development of system gets started. Design- In this particular stage, the system requirement is analysed and the low-level interface design based on the prepared working system. Testing- The technical appropriateness of the system need to be checked in this particular phase and if any kind of errors are identified get resolved by reverting back to previous stage. 21 Implementation- In this stage, the developed user interface is mainly used to create the actual authentic interface design as well as the addition of functionality with the interface to develop the fully functional system. Maintenance- Both the correction and changes are needed to be done based on the development of projects and all identified errors of the system need to be resolved from maintenance phase along with the patch and making slight change in all functional modules. In the above-discussed stage of the developmental process the usability, testing is applied to improve both the design and efficiency of the developed system. The useability testing process is performed by doing the proper use of two different types of approaches like experimental approach and heuristic approach. 7.2. Evaluation methodology Vaishnavi, and Kuechler, (2015) discussed that the heuristic approach is mainly used to ask the evaluators group concerning the preferences and evaluation of interface design based on the attributes. The prototype of system is mainly required to be evaluated based on some criterion set like natural and simple dialog, by doing the proper use of mock-up interface and user language. It also mentioned that the interface also needed to be providing constructive feedback to all users and it is also need to be more interactive to assist the user to their destination. 7.3. Test audience and ethical considerations Questionnaires are mainly used to do the creation of test plan and also to understand the testing of usability of web interface that is mainly developed to create the interactive website for online gift shop. It also discussed that the user also have proper access to participate in completing the survey by sharing all their views based on the usage and user 22 acceptance of the website. Apart from that, it is also strict that user should not be asked any types of un-ethical questions about the website usability like testing which need to be done in efficient manner. 7.4. Evaluation Experiments In this Wylie, Harvey and Liddy, (2016), discussed that uses of different preventive measures and shortcuts helps to reduce all types of user errors and also get tested to do the effective design of user interface. The responsive of website is mainly tested based on the load given in the system as well as the simple and interactive design of the website that is mainly used to do the proper design of the system user interface. Apart from that, it also discussed about the protection of the system based on the use of both validation and authentication mainly used in the interface that is analysed to do the proper development of an effective user interface design for the online gift shop named “Gifts Corner”. 7.5. Analysis Methodology and Procedures It also discussed about experimental approach that is used at various levels of development cycle are discussed below: Assessment- it mainly analyse the correctness of conceptual model and also performs various activities to do the analysis of both functionalities and errors of the system. Exploratory- it is mainly done in the early phase of life cycle of development process when all functional specification and different high-level design is mainly created. The important goal of testing is discussed to analyse the representation of conceptual model and all participants of test are the designer and different users. The designer also collects data by doing the proper use of qualitative analysis and findings that are missed for the inclusion of design. 23 Comparison- the interface design is mainly compared with various available design for all users and the decision is mainly taken to choose the exact design that mainly suited as the website interface. Validation- it is mainly performed to do the analysis of authentication and validation that are done for users at the time of doing logging in the system based on realistic scenario to purchase the products from website. 24 Bibliography Astrom, K. J., &Wittenmark, B. (2013). Computer-controlled systems: theory and design. Courier Corporation. Balanis, C. A. (2016). Antenna theory: analysis and design. John Wiley & Sons. Confrey, J., & Maloney, A. (2015). A design research study of a curriculum and diagnostic assessment system for a learning trajectory on equipartitioning. ZDM, 47(6), 919-932. Endsley, M. R. (2016). Designing for situation awareness: An approach to user-centered design. CRC press. Johnson, J. (2013). Designing with the mind in mind: simple guide to understanding user interface design guidelines. Elsevier. Kelly, A. E., Lesh, R. A., &Baek, J. Y. (2014). Handbook of design research methods in education: Innovations in science, technology, engineering, and mathematics learning and teaching. Routledge. Saaty, T. L., & Kearns, K. P. (2014). Analytical planning: The organization of system (Vol. 7). Elsevier. Vaishnavi, V. K., &Kuechler, W. (2015). Design science research methods and patterns: innovating information and communication technology. Crc Press. Wasson, C. S. (2015). System Engineering Analysis, Design, and Development: Concepts, Principles, and Practices. John Wiley & Sons. 25 Wylie, M., Harvey, D., &Liddy, T. (2016). Model-based conceptual design through to system implementation-lessons from a structured yet agile approach. In 2016 Systems engineering test and evaluation conference: SETE 2016 (p. 87). Engineers Australia.