Software User Interface Design and Construction

* Software User Interface Design and Construction ## Review of Chapter 5 In Chapter 5, we covered: * Software high-level design * Software architecture patterns * Software architecture * Software design patterns * Software component design * High-level software design technological considerations ## Chapter 6 Objectives In Chapter 6, we will explore: * What a user interface is * Elements of a user interface * HTML (HyperText Markup Language) * AJAX technology (Asynchronous JavaScript and XML) * Model-View-Controller (MVC) design * Client-side scripts ## 6.1 Introduction to User Interfaces * The user interface (UI) is the visible part of a software product that users interact with. * It's where the business logic layer's processed information is displayed (unless output is directed to a program, file, or hardware). * The UI serves as the input point for users to provide data for the software to process. * Therefore, the user interface handles both input submission and output delivery. * Aesthetics is important for user interfaces to be engaging. * A productive UI is essential; unnecessary input requirements or irrelevant output information can hinder user productivity and cause confusion. ## 6.2 Graphical User Interface * Early UIs were text-based, but with Windows and graphics, they evolved to display 3D images. * Users typically interact using a mouse and keyboard, but specialized software may use sensors, electronic pens, or keypads. * Smartphones have made UI development an exciting area in software engineering due to challenges of different interface sizes, interactive screens, and user needs. * UIs for smartphones must consume less memory and processing resources due to the devices' limitations. * Human-Computer Interaction (HCI) is a related discipline focusing on the design, evaluation, and implementation of interactive computing systems. ### 6.2.1 Rich Windows-Based GUIs * Client-server products often have a rich Windows-based GUI on the client side. * The client part is installed on user computers and connects to the server part through computer networking. * Rich Windows-based GUIs depend on the operating system, so the client part must be programmed to be compatible with the user's OS. * For example, an installation program written for Windows won't work on Linux. * Windows Forms provide GUI components for client-server applications and are helpful for processor-intensive tasks like document, database, graph, and digital video processing. * Developers select a Windows Form and add user interface control elements to create a rich Windows-based GUI. * Key characteristics include responsiveness, security, and access to local resources. * Responsiveness is faster compared to server-based UIs because they run locally. * Windows Forms can have complete or partial access to local computer resources, and access to the file system can be controlled. * Security isn't a major issue, as these products are deployed behind a firewall, though securing personal information within the network is important. * Web-based products face more security threats because they are exposed to the World Wide Web (WWW). * Figure 6.1 depicts a rich Windows-based GUI with various user control elements (label, textbox, drop-down list, button, radio button, status bar, scroll bar). ### 6.2.2 Web Browser * A web browser is a GUI developed for web-based products, similar in appearance to a rich Windows-based GUI but with many differences. * The browser is installed on the user's computer, but the content runs on a web server (unlike rich Windows-based GUIs where processing is local). * For instance, content from www.microsoft.com runs on Microsoft's web server. * Client-side scripts allow programs to run locally within a web browser. * Web applications are developed as web pages with web forms (HTML forms). * Interactive graphic user control elements require data to travel to the web server and back for updates, which can affect responsiveness. * Web pages are slower than Windows-based GUIs because content runs on a web server, but client-side scripting and validation can increase responsiveness. * Accessing web applications requires an Internet connection, which exposes computers to malware. * Web browsers have built-in security mechanisms to prevent dangerous programs from running and accessing local computer resources. * Interfaces needing local computer access require a permission mechanism to request user authorization. * Web forms are based on a loosely coupled model, and components are invoked through HTTP, an asynchronous and stateless model for data transfer. * HTTP is not suitable for high-interaction environments or high concurrency database processing, but these limitations are being overcome with hardware and software technologies. * Modern computers have high capabilities, enabling websites to support over 10,000 simultaneous connections with acceptable performance. * Sophisticated security mechanisms protect users from data theft and impersonation and the stateless nature of HTTP is overcome using session objects. * Figure 6.2 depicts a web browser with various user control elements (URL text bar, label, textbox, drop-down list, button, radio button, status bar, scroll bar). Design considerations for web applications are based on the issues discussed in this section. ## 6.3 Graphic Control Elements * Modern applications predominantly use GUIs over text-based UIs. User control elements are generally the same regardless of whether you are developing a rich client application or using a browser as the user interface. * Common user screen elements are depicted in Figure 6.1. * User screen elements can be categorized as containers, selection and display elements, navigation elements, input elements, and output elements. ### 6.3.1 Containers * Containers are topmost elements in the user interface and hold all other user screen elements. * In Windows-based client-server products, the top-level container is the Window, while for web-based applications, it's the browser window. #### 6.3.1.1 Window * Windows are the topmost user interface elements, containing all other elements. * Rich screens are window based (Figure 6.1), and Internet-based software products use browser windows (Figure 6.2) as containers. * Windows can be resized and placed anywhere on the user screen (desktop). #### 6.3.1.2 Modal Window * The modal window is a variant of the common window that cannot be resized. * Acts as a child window and requires user interaction before resuming interaction with the main window. * The user cannot change focus until an action closes the window e.g., clicking Yes or No. * Figure 6.3 depicts a modal window with \"Yes\" and \"No\" buttons. #### 6.3.1.3 Dialog Box * Dialog boxes require users to make a decision by pressing a button. * Users cannot change focus until they dismiss the dialog box by selecting a button. * Dialog boxes are always a type of modal window. * Figure 6.3 depicts a dialog box inside a modal window. #### 6.3.1.4 Frame * Frames keep user screen elements together, segregating groups of different screen elements. * Similar user elements can be contained inside one frame, while another group of similar elements is kept inside another frame. * Figure 6.4 depicts two frames placed on the same window to segregate user elements from each other, including labels, textboxes and buttons. #### 6.3.1.5 Canvas * A canvas is similar to a frame, but it contains palettes instead of user elements. * For example, it can contain a palette of colors. #### 6.3.1.6 Form * Forms are used on any user screen to keep all the user elements together. * There are two types: window forms and web forms. * Window forms create rich Windows-based applications, while web forms create web pages for web-based applications. * Forms take values entered by the user during processing from the user elements to the business logic layer. * Forms are useful on web pages and generally, one form is provided on any specific web page for dynamic processing of the inputs provided by the user. * Users enter values in textboxes and other user elements (inside the form) and then press a Submit button. * The information is sent to the business logic layer. * Figure 6.3 displays a dialog box made of a web form with Yes and No buttons and a label. ### 6.3.2 Selection and Display Elements * There are many user elements for displaying content and selecting values. #### 6.3.2.1 Button * Buttons are commonly used on user screens. * Clicking a button triggers the program to make a decision and perform calculations or navigate to a new window i.e. Next and Previous page. * Figure 6.5 shows a button. #### 6.3.2.2 Radio Button * Radio buttons have a clickable small circle with two states: on and off. * They are used with multiple answers (options) for a question, each answer preceded by a radio button. * Only one radio button (answer) can be selected for a question. * Figure 6.6 depicts a radio button. #### 6.3.2.3 Checkbox * Checkboxes are similar to radio buttons with two states: on (checked) and off (unchecked). * The user can select more than one checkbox to answer a given question e.g., selecting multiple cities. * Figure 6.7 depicts a checkbox. #### 6.3.2.4 Slider * Sliders adjust the value of an element on the screen, typically between 0 and 100. * For instance, adjusting the speaker volume. * Figure 6.8 depicts a slider. #### 6.3.2.5 List Box * A list box contains a static list of names (options), and the user can select one or more of them. * Each name is in a separate line. * Figure 6.9 depicts a list box. #### 6.3.2.6 Drop-Down List * Drop-down lists display names only when clicked, otherwise they are in a collapsed state, occupying one line. * Users can select one or more names, depending on the design. * Figure 6.10 depicts a drop-down list. #### 6.3.2.7 Menu (Menu Item) * Menus are fundamental elements in almost all software products, used to display different windows or change software functionality. * Menus can consist of submenus, and are hierarchically organized. * Figure 6.11 shows many menus on a menu bar. #### 6.3.2.8 Context Menu * Context menus are a variant of standard menus. * They are generally hidden, but displayed depending on the context e.g., right-clicking on a web browser. #### 6.3.2.9 Menu Bar * The menu bar is at the top of any user window. * It contains all the menu items for the software product. * Figure 6.11 depicts many menus on a menu bar, and drop-down menus (submenus) from the Edit menu item. #### 6.3.2.10 Toolbar * The toolbar is at the top of the user window, just below the menu bar. * It contains the most useful tools for common tasks. * Figure 6.12 depicts a toolbar with many tool buttons. #### 6.3.2.11 Icon * Icons are small images that provide useful information to the user inside the user screen. * Icons are also used on buttons (icon buttons). ### 6.3.3 Navigation * Navigation elements include links, tabs, and scroll bars. * These elements help users navigate within a single window or web page and from one window or web page to another. #### 6.3.3.1 Link * Links are extensively used on browsers to navigate the user from one web page to another e.g., http://www.microsoft.com. #### 6.3.3.2 Tab * Tabs are user elements that can be shown or hidden with clicks. * They allow organizing a large number of windows inside the main window, where each inside window is a tab. * Only one tab can be opened at a time. * Figure 6.13 depicts tabs for browser windows, with one window opened when a tab is clicked. #### 6.3.3.3 Scroll Bar * Scroll bars are on the right-hand side of most browsers and rich windows for users to scroll up or down. * Figure 6.14 depicts a scroll bar. ### 6.3.4 Value Input * Value input elements are used to receive inputs from the user. * These include textboxes, checkboxes, and radio buttons. * The values are sent to the middle layer of the software product for computation after a Submit button is clicked. #### 6.3.4.1 Textbox * The most common element for entering user input is a textbox. * Users can enter any text to be used by the software. * Some textboxes may contain validation programs to prevent certain characters from being entered. #### 6.3.4.2 Combo Box * Combo boxes combine a drop-down list and a textbox. * Users can enter values, which become selection values for searching records. * The selection can be used to navigate or carry out processing in the software product. * If the keyed-in value does not match any existing record, an error page can be programmed to show to the user. * Combo boxes are used when searching records is dynamic and can be used for the search words entry box of Google (http://google.com). ### 6.3.5 Output * Output user elements hold values generated by the software, displaying those values to the user on a user screen. #### 6.3.5.1 Label * Labels are commonly used to display values calculated by software products, presenting data coming from the middle layer. * Data in labels cannot be edited by the user (read-only). * Labels also provide identification to other user elements, such as instructing the user what to input in a textbox, e.g., an \"enter username\" label. * Figure 6.16 depicts a label. #### 6.3.5.2 Tooltip * Tooltips are help systems that are hidden on any user screen. * They are visible as balloons or call boxes when a user hovers over some text or another user element. * Figure 6.17 depicts a tooltip. #### 6.3.5.3 Status Bar * Status bars are at the bottom of any user screen. * They contain valuable information about the software product e.g., page number, the number of words, language in Microsoft Word. * Figure 6.18 depicts a status bar in a window. #### 6.3.5.4 Progress Bar * Progress bars provide information about the progress of any task. * Browsers show the download progress using progress bars. ## 6.4 Hyper Text Markup Language * HTML is used to format web pages, not as a general-purpose programming language, but a standard format for displaying web pages inside a web browser. * Web pages can be written in languages like Java Server Pages (JSP), Active Server Pages (ASP), and pure HTML, but a web browser displays content only in HTML format. * Programming code in languages like ASP or JSP is sent to the application server, which runs the code and generates HTML code. * HTML is characterized by pairs of formatting tags, enclosed within angle brackets <> e.g., `

This is in very large fonts

`. * Most tags are used for formatting, but some are used for other purposes e.g., `` creates a hyperlink. * Some tags are empty and do not have a corresponding ending tag e.g., `` for embedding an image. * Web pages are saved as HTML files, which web browsers read and compose into visible web pages (hiding the HTML tags). * HTML can embed images, other media files, and programming scripts, making HTML pages dynamic and interactive. ## 6.5 Cascading Style Sheets * Cascading Style Sheets (CSSs) are used to design web pages, building a formatting layer on top of HTML. * They enable resizing web pages for different screen sizes, like mobile phones, by specifying which elements can appear on small screens. * CSS formatting commands are stored in a file, and the file name is saved in a web page. * The formatting commands are applied when the web page is loaded in a browser. * Different CSS files can be applied for a web page to look differently without changing its HTML content. * CSS commands can be mixed with HTML tags in the page e.g., `

Chapter 1

`. * Alternatively, CSS commands can be stored in a CSS file and then called inside the HTML page using a statement such as ``. * Using separate CSS files allows consistent-looking web pages for a website. ## 6.6 Client-Side Scripting * Scripting is a procedural programming language used to create dynamic web pages. * There are two types of scripts for building web pages: client-side and server-side scripts. * A server-side script is run on an application server, and its HTML output is sent to a web server and then displayed on a web browser via the HTTP protocol (discussed in Chapter 7). * A client-side script resides on a web server and runs on the web browser when connected via HTTP. * The script’s output is in HTML format, displaying content on the web browser. * Some client-side scripts are used for validation purposes without any visible output. * Although web page validations can be done with either client-side or server-side scripting, client-side tasks are faster. * Validation using a server-side script requires a round-trip of data. * User interfaces are composed of HTML elements but HTML is static so tasks like user preferences and automatic services are not possible with static HTML content. * Client-side scripts are needed to do these tasks. * Client-side scripts can be written directly on the web page along with the HTML elements, or they can be saved in a file and called in the web page. * Additional uses for client-side scripts include: * Disabling the right-click functionality to prevent users from downloading images or seeing the source code of web pages. * Validating user input e.g., checking the length of a password field to ensure it is in a certain range and providing a message box if the length of a password field is not valid. ## 6.7 Asynchronous JavaScript and XML * Users submit information to the server by filling in a form on the web page. * Asynchronous JavaScript and XML (AJAX) can creates a partial web form that can be validated on a server without reloading the entire web page, sparing the user from filling same information again and again. * For example, AJAX can be used so that a user can see (in real time) that his/her desired username is not taken without submitting entire registration form. ### 6.7.1 AJAX Details * AJAX consists of elements such as JavaScript and XML. * Initially, HTML, JavaScript, and XML were used to create AJAX components, but later, alternative technologies started being used. * AJAX can be used to check values in user elements by comparing them with values stored in a database. * Figure 6.19 depicts the earliest implementation of AJAX technology with XML file validation. * The client-side script can directly access the XML file without doing a round trip via business logic, validating the user input. * Figure 6.20. depicts that validation can be validated against the values stored in the database by invoking business logic. ### 6.7.2 AJAX Implementation * To implement AJAX in the username validation, a web page can be created with fields for username, password, age, sex, and address, then reading the data and validating without using Submit button. * Web pages have automatic events, such as move-over and move-focus, which can be used to trigger data validation. * For example, a script for checking and validating the username field by comparing it with the stored values in the database can be triggered when focus is moved into the username textbox. * The script gives a message such as \"username already exists\" or \"username is available\" when data is validated. * When this validation script is fired, reloading of the web page does not happen. * AJAX is a useful technology for applications such as this. ## 6.8 Simple (Model-View) User Interface * For simple programs without many user screens, a simple user interface can be designed. * Static elements and dynamic content (business logic layer) are placed on user screens. * Dynamic content from the business logic (model) is displayed on the user screen (view) if it involves displaying content to the user. * Figure 6.21 depicts a simple model-view user interface schema. * The required user interfaces are created, and business logic is written separately. The business logic is linked to the user interface through buttons or links. * When the user presses those buttons or clicks those links, the business logic layer is triggered. Business logic may connect to a database, process data, and display the processed data on the user screen. * For example, a login web page will collect entered username and password and then connect to the database. * If there is a match between user screens and database, a welcome message is composed and sent to the user screen; otherwise, a warning message is displayed. * Each action from the user corresponds to a response from the software product, meaning there is a model for each view. * Whenever a user clicks on the user screen to request the software product to do some computation, the other layers (business logic and database) perform the computation and bring the required view to the user. ### 6.8.1 When to Use * A simple (model-view) user interface with business logic is easy to implement and does not require sophisticated programming. * This architecture can be used for small and simple websites. ## 6.9 Model-View-Controller * When a user interacts with a software product, the interaction can vary from immediate results for his or her queries to indirect rendering of information on the user screen. * A web-based bookstore is an example of storing the information about books that were in the shopping cart throughout the time when the customer was browsing. This shopping cart information was used for making the transaction. * There is a technology known as Model–View–Controller (MVC) with a controller that determines what output is to be provided to the user for each input provided by the user. ### 6.9.1 MVC Description * In MVC technology, the view (what the user sees on the screen) is separated from the computer output through two entities known as model and controller. * The user provides some input through the user screen. * Information is passed on to a program known as controller which then initiates a program, known as model, to do some computation. * The model does the computation and sends the computed results back to the controller. * The controller then finds what information needs to be sent to a program known as view. * The controller plays the most important role in sending and receiving the information with the model and the view. * Figure 6.22 shows how data flow for the MVC arrangement showing arrows, with numbers specifying the sequence of steps. * The fundamental aspect of computing involves saving the information to a database whenever there is an update in the model. * Using MVC, this behavior is controlled, and the updated information is sent to the controller and the controller keeps this information in the memory. * Only when the controller needs to save some information to the database will the controller instruct the model to save these data to the database. * Figure 6.22 shows that the Model and the Controller communicate both ways to send back the data. ### 6.9.2 MVC Implementation * A web-based bookstore can be implemented using MVC. * Controller is responsible for: * Validating the book selected. * Adding the book to the card. * Saving the book to database after checkout. * Model is responsible for: * Data retrieval. * Data manipulation. * Database update. * View is responsible for: * Displaying the data. * Displaying the books in the chart during checkout. * Table 6.1 shows the components and methods of MVC architecture for a Shopping Cart. * Figure 6.23, gives a data flow view for the operation of selecting a book and saving it in the shopping cart. * Figure 6.24 provides a data flow view for the operation of checkout showing Checkout () , Ask model to checkout () and Display checkout (). ## 6.10 Case Study * Online Bank Account Access System (OBAAS) 1.1 and 1.2 use standard user control elements for browsers and are accessible using any browser available in the market. * Client-side scripts are used for user data validation and page formatting. * Figures 6.25 through 6.35 belong to OBAAS 1.1, and Figures 6.36 through 6.39 belong to OBAAS 1.2. ### 6.10.1 Client-Side Scripts * Client-side scripts are used for: * Validation: to check user input for a range of values entered in each textbox and raise an error in a dialog box. * Style sheet: to format web pages. ### 6.10.2 Hyper Text Markup Language * HTML is used to design all the web pages for both versions of OBAAS. Both client-side scripts and server-side scripts are embedded inside HTML on all the web pages of the application. ### 6.10.3 Mockup Screens for OBAAS 1.1 * Mockup screens represent user screens for OBAAS 1.1 and their user control elements. * **Create account page (Figure 6.25):** The user needs to provide the Username, Password, Retype password, Phone number, and Address in the fields given on this page. * **Welcome page (Figure 6.26):** When the user clicks this button, he or she is presented with the create account page shown in Figure 6.25. * **Error message * Incorrect (Figure 6.27):** If the information related to the password and retype password does not match, then a dialog box similar to the one in Figure 6.27 appears with a message: * **Account balance page (Figure 6.28):** The user enters the Account number, Username, and Password and clicks the Submit button. * **Account balance response page(Figure 6.29):** Then they are presented with the account balance response page as depicted in Figure 6.29. * **Bill pay page (Figure 6.30):** The user has to select a biller from the drop-down list. Then, the user has to enter the amount to be paid in the Amount textbox. The user also needs to provide the inputs for Account number, Username, and Password in the respective fields. * **Bill pay page (Figure 6.31):** When the user clicks the Service request button (e.g., as given in Figure 6.26), he or she is presented with the bill payment page as depicted in Figure 6.31. * **Service request page (Figure 6.32):** (e.g. given in Figure 6.26) he or she is presented with the Service request page as depicted in Figure 6.32. * **Service request response page (Figure 6.33):** Once the user clicks the Submit button, after selecting the service request, the user is presented with the service request response page as depicted in Figure 6.33. * **Close account page (Figure 6.34):** When the user clicks the Close account button on the web page (e.g., as shown in Figure 6.26), he or she is presented with a Close account page as depicted in Figure 6.34. * **Close account response page (Figure 6.35):** The user needs to provide the Account number, Username, and Password in the textboxes and then press the Submit button. Once the user does this, a Close account response page will appear as depicted in Figure 6.35. ### 6.10.4 Mockup Screens for OBAAS 1.2 * There are two changes in OBAAS 1.2 compared to OBAAS 1.1: 1. In OBAAS 1.2, there is a US$5 fee for each new cheque book. Thus, in OBAAS 1.2, when a customer makes a request for a new cheque book, US$5 is deducted from his or her bank account. 2. In OBAAS 1.2, a customer can make a money transfer from his or her account to another one if the other account is also with OBAAS. * **Service request page (Figure 6.36):** In Figure 6.36, the user needs to select the “issue new cheque book” option (not shown in the image) from the drop-down list. Once the user presses the Submit button, he or she will get the service request response page as given in Figure 6.37. * **Service request response page (Figure 6.37):** As stated in the software requirement document a fee of $5 has been deducted from your account for charges against issue of the cheque book. * **Service request page (Figure 6.38):** In Figure 6.38, the user needs to provide the inputs to Username e.g. the account number. * **Service request response page (Figure 6.39):** Once the user provides correct information and clicks the Submit button, the money transfer response page is displayed as given in Figure 6.39. * a message is displayed to the user stating that the account has insufficient money, in which case the money transfer cannot be performed. ## 6.11 Chapter Summary * User interfaces are the only visual part of any software product. * User interfaces used to be character based but now user interfaces provide many ways in which users can interact with the software product. * GUIs consist of user control elements, such as containers, user input elements, output and elements. * For web-based applications, the user interface is a browser. Any web page can be displayed on a browser using HTML. * The limitation of HTML is that it supports only static data, but to display data that are processed by the business logic, server-side scripts are a must. * Some technologies such as AJAX and MVC help in user input validation and in tasks such as displaying the views to the user in a user-friendly way.