1. Teaching slides Chapter 6

2. Chapter 6 Software user interface design & construction Contents Introduction Graphical user interface – Rich window based GUIs – Web browser Graphic control elements – Containers – Selection & display elements – Navigation – Value input – Output HTML Cascading style sheets Client-side scripting Asynchronous JavaScript & XML Simple (model-view) user interface Model-view-controller

3. Chapter 6 Software user interface design & construction Introduction Software user interface is used both for providing input to the software product by the user as well as displaying output from the software product. A user interface can be a character based or graphical. Now a days graphical user interfaces (GUI) are mostly used. User interfaces are constructed using user interface elements like windows, buttons, textboxes etc. All these user interface elements are software components.

4. Chapter 6 Software user interface design & construction A rich window

5. Chapter 6 Software user interface design & construction A web browser window

6. Chapter 6 Software user interface design & construction Rich window & web based user interfaces When a user interface is designed, all the required user interface elements are inserted inside a classic (rich) window or a web browser window. A rich window based user interface is used for client-server based software products. A web browser window based user interface is used for web-based software products. A rich window is built using windows forms. Since rich windows (client part of a client-server based software product) are installed on all user computers, they have full access to the operating system to do virtually anything on the host operating system. This may lead to security threats. However these security threats are not large as the client-server based software products are installed behind a firewall.

7. Chapter 6 Software user interface design & construction Rich window & web based user interfaces A web-based user interface is built using web forms. Web forms do not have free access to the operating system of computer of a user. Thus they are more secured as compared to client-server based user interfaces. However since web-based software products are hosted on any website, users who access the website are exposed to attacks from malicious websites and computer programs. All the user interface elements used for both rich window based user interfaces and web browser based user interfaces look and behave in almost the same way.

8. Chapter 6 Software user interface design & construction Various types of container user elements

9. Chapter 6 Software user interface design & construction User interface elements User interface elements can be broadly categorized as container elements, selection & display elements, navigation elements, input elements and output elements. Container elements are used to provide a container so that other user interface elements can be put inside them. Some of the container user interface elements include modal windows, non-modal windows, frames, tabs etc.

10. Chapter 6 Software user interface design & construction Various types of selection & display user elements

11. Chapter 6 Software user interface design & construction Selection and display user elements group contains buttons, radio buttons, lists, drop down lists, menus, sliders, tool bars, check boxes etc. Buttons are used to get output from the software product by pressing them. Radio buttons and check boxes are used to select one of the options. Lists and drop down lists are used to provide a list of values from which a user can select one or multiple values. Menus and tool bars are used to invoke a program.

12. Chapter 6 Software user interface design & construction Navigation user elements www.abc.com

13. Chapter 6 Software user interface design & construction Navigation user element group includes links, tabs, scroll bars etc. A link is used to link a web page to another web page. When a user clicks on a link then the web page navigates to the page which was linked in the link which the user clicked. Tabs are used to provide a lot of information contained inside each tab. When a user clicks on any of the available tabs then the present tab will open and display the information contained inside that tab to the user. The previously open tab will close when the present tab gets opened. Scroll bars are provided at the right hand edge of a window. Users can scroll down or up a window using these scroll bars.

14. Chapter 6 Software user interface design & construction Input user elements are used for getting inputs from the user. This input is then used to get output from the software product. Some of the input user elements include text boxes, combo boxes etc.

15. Chapter 6 Software user interface design & construction Output user elements

16. Chapter 6 Software user interface design & construction Output user elements include labels, tool tips, status bars, progress bars etc. Labels are commonly used for 2 purposes. One is to show output from the software product and secondly to identify other user elements. For example, a label with text is placed at the side of a textbox to show the users, what input to be provided in the textbox (e.g. a label with text “User Name” will help in identifying the user to provide the right input in the text box which is placed on the side of this label). Tool tips help the users to identify a button, text box or any other user element. When a user hovers the mouse over any of these user elements and if the user element has a tool tip attached then a floating text will appear; identifying the user element.

17. Chapter 6 Software user interface design & construction Hyper Text Markup Language (HTML) A web-based software product’s user interface runs on web browsers. Web browsers can only display HTML compatible content. If any content is not HTML compliant then it can not be shown on any web browser. HTML (Hyper Text Markup Language) is a content presentation formatting language. It is composed of HTML tags. All content which need to be shown on a web page must be embedded inside the opening and closing parts of a HTML tag. For example, if a sentence needs to be shown in bold letters then tag needs to be put around this sentence. Some HTML tags do not come in pair. They are known as empty tags. For example, tag is used to embed an image on a web page. A web page contains all the HTML tags when it is designed. When this web page runs inside a web browser then all these tags get hidden. Only the effect of these tags is shown on the running web page inside a web browser. For example, the web page will show the image which was embedded in the web page but will hide the tag when it runs.

18. Chapter 6 Software user interface design & construction Cascading stylesheets (CSS) Cascading stylesheets (CSS) are used for controlling presentation of the content on a web page. CSS is used for 2 purposes: providing same look and feel across web pages of a website and adapting the content for different user interfaces. A common look and feel for all web pages of a web site can be easily achieved if all these pages have the same format. This format can be defined inside a CSS file and can be called on each web page. The same web page can be loaded on different devices with different screen sizes if formatting is defined in such a way that the same web page adapts to different screen sizes without the need to create different web pages for different user screen sizes. CSS helps in achieving this functionality.

19. Chapter 6 Software user interface design & construction Client side scripts Client side scripts are written in a programming language which can be easily interpreted by all types of web browsers. Client side scripts are used for many purposes like user input validations, setting user preferences, remembering user information such as user name and passwords etc. Client side scripts are not run on a web server. They are downloaded on to a web browser and run on the web browser.

20. Chapter 6 Software user interface design & construction Client side scripts User input validations can be checked using a round trip processing where user input is checked against data in a database. This kind of user input validations can be done using server side scripts. This round trip processing is slow. If user input validations can be done using client side scripts then it will be very fast. User preferences for presentation style, font size etc. can be set using client side scripts. User preferences can be saved in a cookie and when user revisits the website then user preferences can be called from this cookie. A cookie is a small data file which is created and stored on the user computer. User information can be saved in a cookie. When user revisits a website then user information can be retrieved from this cookie so that fields such as user name and passwords are filled automatically.

21. Chapter 6 Software user interface design & construction AJAX (Asynchronous Java & XML)

22. Chapter 6 Software user interface design & construction AJAX (Asynchronous Java & XML) is a technology which is used to validate user inputs on the fly. There is a problem with web pages where a user needs to fill a form and submit it. If any of the fields on the form (e.g. a user name) is not valid then the user is presented with the same form again to be refilled. The user will keep refilling the form until all entries on the form is valid. This is problematic to the user as it is not known in advance as to any user name has already been taken. Thus the user has to keep guessing if a user name is available. If the user is provided with an input validation just at the point of entering the user name then the user will be spared from refilling the entire form again and again. AJAX technology allows user input validation on the fly at the point of filling a field on a form. This is achieved by checking the user input at the field level instead at the form level. The older implementation of AJAX involved checking user input against a flat file database like XML. Later implementation of AJAX extended the user input validation against relational databases.

23. Chapter 6 Software user interface design & construction Model view architecture for web-based software products

24. Chapter 6 Software user interface design & construction Most software products have a user interface, a business logic layer and a database connected at the back end. When a user invokes a command at the user interface then the business logic layer does some computing with the help of the database and comes back and displays the output of the computing to the user on the user interface.

25. Chapter 6 Software user interface design & construction MVC (Model View Controller) Architecture

26. Chapter 6 Software user interface design & construction Model-View-Controller (MVC) is a software architecture which is used for web-based software products. MVC is used when the input from a user or the output from the software product needs to be controlled before they are forwarded for further processing. Apart from the model (the business logic) and the view (the user interface) there is a controller which controls further processing in the software product with MVC software architecture. The controller decides if a model needs to be built for a user request (user input) or not. The controller can again decide if a view needs to be constructed for a model or not.

27. Chapter 6 Software user interface design & construction Save books in shopping cart method implementation in MVC

28. Chapter 6 Software user interface design & construction The MVC architecture can be understood by the following example. A shopping cart is implemented at an online book shopping store. When a user wants to save the books which he/she has selected and placed in the shopping cart; he/she will invoke the save books to shopping cart method on the user interface. The controller will process this method by asking the model to construct a view. The model will construct a view and pass it to the controller. The controller then can show this view to the user. In the MVC architecture you can see that the controller plays the central role in controlling the flow of information to the model and the view.