04_Handout_1(3).pdf

IT1906 HCI Design The Overall Design Process Requirement Analysis Developing a system requires initial research, which must be conducted thoro...

IT1906 HCI Design The Overall Design Process Requirement Analysis Developing a system requires initial research, which must be conducted thoroughly from a user perspective. In order to optimize the interaction between the system and the user, it is necessary to know the user needs and characteristics, usage context, preceding systems and the competitive system aspects (Center for Usability Research and Engineering, n.d.). For an interactive software or application that focuses on user experience, it is important to consider and assess the functions that the user will activated directly through interaction and that are significant in understanding certain aspects of the user experience. Requirements analysis basically establishes the goal for the development of a system from the viewpoint of the target users. User Analysis This design process reinforces the original requirements analysis to satisfy potential system use more comprehensively. This also prioritizes user experience and usability standards. Its results will always reflect to the original requirements, which could identify supplementary user interface (UI) requirements. Scenario and Task Modeling This design process is the most important part of interaction modeling. It involves the identification of the application task structure and the sequential relationship between the different elements of the program or a system. Beginning with a simple task model, it is easier to draw a more detailed scenario of how the system would be utilized. With this, developers and designers can assess both the appropriateness of the system and the feasibility of the given requirements. The process of storyboarding can be used in scenario and task modeling, which allows designers to create a rough visual profile of the interface. Interface Selection and Consolidation Software interface components (e.g., search fields and widgets), interaction techniques (e.g., voice and facial recognition), and hardware specifications (e.g., sensors and display monitors) will be made in this design process. Note that the chosen individual interface components need to be consolidated into a practical package because not all interface components may be available on a working platform (e.g., desktop and smartphone). However, adjustments can be made for numerous reasons besides platform requirement, such as constraints in budget, time, personnel, etc. Interface Selection Options Hardware Platforms The design configuration of a hardware interaction platform greatly depends on the characteristics of the application that requires a certain operating environment. Different interaction and subtasks may require various individual devices. Refer to Table 1 for the list of platforms suitable for different operating environments. Mode of Platform Tasks Task/Platform Examples Operation Office-related tasks, time-consuming or Documentation and Desktop stationary crucial tasks, and multitasking research Smartphones/ mobile Simple and short tasks, special tasks Calling and messaging Handheld Simple, mobile and short tasks which Sales pitch and location Tablet/Pads mobile require a relatively larger screen mapping 04 Handout 1 *Property of STI  [email protected] Page 1 of 4  IT1906 Mode of Platform Tasks Task/Platform Examples Operation Special tasks and situations where stationary/ Printer and photocopying Embedded interaction and computations are needed mobile machine on the spot TV-centric tasks, limited interaction, and Microsoft Xbox and TV/ Consoles stationary tasks that need privacy Nintendo Wii Stand-alone kiosk and wall- Kiosks/ Public and limited interaction, short series stationary mounted installation for Installations of selection tasks, and monitoring tasks monitoring Spatial training, tele-experience and Virtual Reality stationary VizBox and VirtualDome telepresence, and immersive entertainment Special military helmet for stationary Special purpose hardware platforms tactical command and Free Form and mobile consisting of a customized configuration control and multi-touch platform for multiple users Table 1. List of different platforms with the specific tasks it can perform and some examples. Virtual Dome. (2018). Source: https://www.virtualdomes.com/ Software Interface Components These are the integrated parts of a system or an application interface. These components are the means to break the complexity of a software by providing an easy interaction to the user. Sometimes, software interface components are referred to as user interface components. This section also contains the overview of the essential and basic elements for the graphical user interface (GUI), which are windows, icons, menus, and mouse/pointer-based interactions. These are sometimes referred to as WIMP (windows, icon, menu, and pointer). WIMP interfaces have significantly contributed to the propagation of computer technologies. Here are the important areas to consider in the interface selection and development, including the WIMP, GUI components, and 3D interfaces: Windows/Layers – These provide the working area of an application, which pertains to the user interface. Modern computer interfaces are designed around windows, or the visual output channels and abstractions for individual computational processes. For a single application, several subtasks might be needed simultaneously and be interfaced consequently through multiple windows or layers. It is also possible to launch overlapping windows in modern computers. For devices with small display size, like mobile phones, nonoverlapping windows are used instead. Nevertheless, flipping through different applications are possible. Icons – These are simple, interactable, and intuitive objects that can be visually represented as a compact and small pictogram. Icons are distinctively designed to be a compact representation of an application which facilitates interaction. Similarly, for aural modality, an earcon serves as an icon for people with special needs. It is a brief distinctive sound used to represent a specific event or convey other information (Educalingo, n.d.). It is a common feature of a computer operating system and applications, ranging from beeping when an error occurs to the customizable sound scheme which indicates startup, shut down, and other events. Recently, the Windows Metro-style interface introduced a new type of icon called tile that can dynamically change its appearance with useful information related to what the icon is supposed to represent. 04 Handout 1 *Property of STI  [email protected] Page 2 of 4  IT1906 Menus – These allow activations of commands and tasks through selection. These can be organized as a one-dimensional list or a two-dimensional array of items. Selection of a menu item involves three (3) subtasks: activating the menu, scanning the items, and selecting an item. Menus can also be presented in various styles and mechanisms like the pull-down, pop-up, application bar, 1D toolbar, and tabs. See Table 2 for the list of menu styles and their proper usage. MENU TYPE USAGE Pull down Top level (main) categorical menu Pop up Object-specific, context-specific Toolbar Functional/Operational tasks Tabs File folder metaphor (categorical menu) Scroll menu Long menu (many menu items) Identification of items by icons (vs. by 2D array/Image maps long names) or pictures Buttons/Hyperlinks Short menu (few choices) Checkboxes/Radio buttons Multiple choices/exclusive choice Hot Keys For expert users Telemarketing and for use by the Aural menu disabled Table 2. When to use different menu styles Source: Human-Computer Interaction Fundamentals and Practice, 2015. p. 69 Direct Interaction Through Pointer – Before the mouse era, human-computer interaction was in the form of keyboard inputting of text commands. The mouse made it possible for users to apply a direct metaphoric “touch” to the target objects. Note that the mouse or pointer-based interaction is tied to the concept of direct and visual interaction. In addition, “virtual touch” has already extended to direct manipulation, like drag and drop, copy and paste, and rubber banding. GUI Components for User Input – In considering the interactive interface options of an application, it is essential to understand the following representative GUI components for soliciting input from a user in a conventional manner: o Text box – This is used for making short to medium alphanumeric input. o Toolbar – This is a small group of frequently used icons or functions organized horizontally or vertically for a quick and direct access. o Forms – This is a mixture of menus, buttons, and text boxes for long and interrelated input. o Dialog box – This is a mixture of menus, buttons, and text boxes used for short and mixed- mode input. o Combo box – It is a drop-down list box that includes an option to the user to either choose an option from the list or type in their own option in the text box. 3D Interface – It is described as “an image that provides the perception of depth” (TechTarget, n.d.). Making a 3D image interactive and making the user feel involved with the scene provide the experience of virtual reality. 3D interfaces are commonly presented and operated in a 2D space, which is controlled by a mouse or a touch screen. Though the 2D control for a 3D application is possible, it is often inadequate. The mismatch in the degrees of operation brings about exhaustion and inconvenience to the users. 3D interfaces are now used in developing video games and very large displays. Also, smartphones and tablets today are embedded with advanced sensors for 3D spatial input, which allows users to interact with the device. 04 Handout 1 *Property of STI  [email protected] Page 3 of 4  IT1906 Wire-framing Wire-framing is a way to design a website or an application service at a structural level. A wire-frame is commonly used to layout content and functionality on a page which considers the users’ needs and experience. Wire-frames are used early in the development process to establish the basic structure of a page before visual design and content are added (Experience UX, 2019). Wire-framing is fairly simple. According to Myre (2018), basic shapes and elements are used to block out where each piece of content and UI element will appropriately fit. The power of wire-framing lies in simplicity. Elements can be rearranged quickly and easily for iteration and approval before creating a prototype. Some examples of wireframe tool are Fluid UI, Wireframe CC, Sketch, InVision Studio, and Adobe XD. References: 30 Examples of Embedded Systems in Daily Life. (2017, December 4). In Comp Sci Station. Retrieved from https://compscistation.com/examples-embedded-systems-daily-life/ on June 26, 2019 3-D (three dimension or three-dimensional) (n.d.). In TechTarget. Retrieved from the TechTarget website: https://whatis.techtarget.com/definition/3-D-three-dimensions-or-three-dimensional on June 14, 2019 Bowman, B. (n.d.). The encyclopedia of human-computer interaction (2nd Ed.). Retrieved from https://www.interaction- design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/3d-user-interfaces on June 27, 2019 Combination Box (Combo Box). (n.d.). In Techopedia. Retrieved from https://www.techopedia.com/definition/6552/combination-box-combo-box on June 21, 2019 Culatta, R. (n.d.). Storyboarding. Retrieved from https://www.instructionaldesign.org/concepts/storyboarding/ on June 26, 2019 Earcon. (n.d.). In Educalingo. Retrieved from https://educalingo.com/en/dic-en/earcon on June 13, 2019 Kim, G. (2015). Human-computer interaction fundamentals and practice. USA: CRC Press. Myre, M. (2018, December 4). The 14 best wireframe tools for 2019 [Web log post]. Retrieved from https://zapier.com/blog/best-wireframe-tools/ on June 14, 2019 Portable VR for Professionals. (n.d.). In Worldviz. Retrieved from https://www.worldviz.com/portable-vr-for- professionals on June 10, 2019 Preston, A. (2016). Basic principles of HCI lecture 2. 1. Requirements analysis. Retrieved from https://slideplayer.com/slide/7590467/ on June 10, 2019 Requirements Analysis. (n.d.). In Center for Usability Research & Engineering. Retrieved from http://www.cure.at/reqirements-analysis.html on June 10, 2019 Spacey, J. (2017, May 23). 7 examples of software components. Retrieved from https://simplicable.com/new/software- components on June 13, 2019 Virtual Reality. (n.d.). In Merriam-Webster. Retrieved from https://www.merriamwebster.com/dictionary/virtual%20reality on June 26, 2018 04 Handout 1 *Property of STI  [email protected] Page 4 of 4