1. Teaching slides
Chapter 6

2. Chapter 6: User interface design and implementation
Contents
Software engineering methodology considerations
Web browser
User interface elements
Hyper Text Markup Language
Cascading style sheets
AJAX
Client side programming
User interface design and modeling

3. Chapter 6: User interface design and implementation
Software engineering methodology considerations
When we need to create software designs then the chosen software engineering methodology influences as to how we do it. On waterfall projects, all of the user interfaces for the entire software product need to be created together. This is because entire software requirements for the project are gathered at the beginning of the project. This results in lots of work. Specialist user interface designers need to be hired on the project who will create all of these user interfaces. Once they complete their work then they are no longer needed on the project. So they are released after their work so that they can work on some other project.

4. Chapter 6: User interface design and implementation
Software engineering methodology considerations

5. Chapter 6: User interface design and implementation
Software engineering methodology considerations
On Agile projects in contrast, the customer provides only a bunch of user stories at a time. So the number of user interfaces needed to be created for these user stories is also small. On Agile projects, no specialist roles are defined and each team member is supposed to do any kind of project work. Thus user interface design work can be done by any project team member. Once all user stories are implemented for a Sprint and the Sprint is completed; the customer again provides a bunch of user stories to the project team to implement. The project team will again create user interfaces for these user stories.

6. Chapter 6: User interface design and implementation
Software engineering methodology considerations

7. Chapter 6: User interface design and implementation
Web browser
Web browsers are software products which are installed on user computers. If a user computer is connected to the internet then the user can connect to any website hosted anywhere in the world using the web browser installed on his/her computer. All the content hosted on a website can be displayed on any web browser. A user can interact with websites using the web browser. Dynamic content on websites are processed by application servers which host the website. So even though a website is hosted on a server but its content becomes visible on a web browser.
Any web browser is also capable of doing some computation. If a website has any client side scripts written then this script is downloaded on a web browser. Most web browsers have a built in engine which can execute client side scripts and show the output.
A web browser only understands content which is HTML compliant. If any content coming from a website is not in form of HTML then it can not be displayed on any web browser.

8. Chapter 6: User interface design and implementation
Web browser

9. Chapter 6: User interface design and implementation
User interface elements
Any website contains many web pages. A web page can be created using user interface elements. Most of the commonly used user interface elements are already defined in most programming languages. These readymade user interface elements can be easily drawn on a graphical editor in any IDE (Integrated Development Environment) to build these web pages.
There are many types of user elements. Some user elements help in providing inputs from users on web pages. Some examples of input user elements include text boxes, buttons, radio buttons, check boxes etc. Some other user elements are used for providing navigation on web pages. These include scroll bars, links etc. Some other user elements help in displaying outputs after computations. These elements include labels, lists etc. Some other types of user elements are used as containers which help in organizing other user elements on a web page. These include panes, frames, dialog boxes etc.

10. Chapter 6: User interface design and implementation
User interface elements

11. Chapter 6: User interface design and implementation
HTML
Hyper Text Markup Language (HTML) is the formatting language which is used for creating and displaying web pages. HTML consists of tags. These tags define as to what content to be displayed on a web page and how. For example, there is a HTML tag to include an image on a web page. There is a HTML tag to format a piece of text content to show it as a header with large fonts. There is another HTML tag to format a piece of text content to display it as a paragraphs.
If any content is not HTML compliant then it can not be displayed on a web page.

12. Chapter 6: User interface design and implementation
HTML
Here is a small example of a web page having HTML code.
<!DOCTYPE html>
<html>
<head>
<title>Brisbane smart city system</title>
</head>
<body>
<h1>Title goes here</h1>
<p> paragraph goes here.</p>
</body>
</html>

13. Chapter 6: User interface design and implementation
HTML
In this HTML example, we are declaring many HTML tags. The first tag <!DOCTYPE> declares what language will be there on the web page. We have declared the language as HTML. The next tag <html> is used to start a web page and declares that the content inside this tag is all in HTML format. The end pair of this tag is </html> which declares that the HTML content on the web page has ended. This tag is at the bottom of the piece of code. The next tag is the header <head> tag. Header section in a HTML file is a place to contain information regarding some included files, the title of the web page etc. The header section ends with </head> tag. The main body of any HTML file is contained inside the <body> and </body> tags. The body section contains all the content which needs to be displayed on a web page. In the HTML file, the 2 pieces of content which will be displayed enclosed inside the <h1> and <p> tags. The <h1> tag specifies that the content “Title goes here” should be formatted as the heading for the web page with large fonts. The <p> tag specifies that the content inside this tag “paragraph goes here” will be formatted as normal text with standard fonts in form of a paragraph. Both these pieces of content are closed with </h1> and </p> tags.

14. Chapter 6: User interface design and implementation
Cascading style sheets
Cascading style sheets (CSS) is used as a formatting tool to further format web pages. HTML itself is a formatting language but does not provide much help when formatting is needed across several web pages. For example, if we want to have a same look and feel across many web pages of a website then it is difficult using HTML alone for this task. If we can include a CSS file which has definitions for a common formatting across all web page of a website then there will be a same look and feel across all of these web pages.
CSS is also useful in cases when we need to make a web page compliant for various devices having varying screen sizes. If screen size of a device is small then smaller fonts and images should be displayed for a web page. In contrast for normal sized screens normal fonts and image sizes should be displayed for the same web page. This functionality can be achieved by defining these page attributes in different CSS files and loading the appropriate CSS file for each device.

15. Chapter 6: User interface design and implementation
AJAX
Asynchronous Java and XML (AJAX) technology is devised to take care of loading of web pages only when required and using other events to load user elements on a web page. For example, a user may provide wrong input on a web page and the validation rules may not allow this information to be saved in a database. In such cases, the input data entered by the user is lost the moment user clicks the submit button (because of navigation from current web page) and the user may need to enter data on the web page all over again. In cases like providing a username on a user registration web page, the user does not know if some username is already taken. So the user may end up providing input several times. This is a real problem. Using a mouse click or similar event; it is possible to validate the input for username and find out if it is already taken or available. Thus the input provided by the user in other fields on this web page will not be lost as the web page will not navigate for username validation.
The earliest implementation of AJAX involved using XML files to do validation using client side scripting. But now most AJAX implementations use server side scripting.

16. Chapter 6: User interface design and implementation
Client side scripting
Dynamic websites contain programming code which provide dynamic content on a website. Most of the dynamic content is generated by software programs which are executed on the server which hosts the website. But in some cases, we need to process user input data at the user’s computer itself. For example, if we need to validate input provided by a user then it is better to do it there itself.
For these types of tasks, pieces of code are written and saved on a website. Whenever we need to run these pieces of code, they are downloaded on the web browser of a user computer. Most web browsers have built in engine to execute these pieces of code. These pieces of code are known as client side scripts.

17. Chapter 6: User interface design and implementation
User interface modeling (mockup screens)
We have learned about web browser, user interface elements, HTML and other technologies which help in creating user interfaces. We also had learned about user stories in Chapter 2. From user stories, we need to create software designs including the user interfaces. One of the best methods to design user interfaces is mockup screens. From user stories, the aspects about how a user is interacting with the software product can be deduced. Using any graphical editor, we can then draw screens which resemble web browser screens with all the user elements needed. A drawn out screen should look like the same way a user may see a user screen of an actual software product. These drawn out screens are known as mockup screens.
There should be as many number of mockup screens as a user may encounter when using the actual software product.

18. Chapter 6: User interface design and implementation
User interface modeling (mockup screens)
Suppose we have this user story:
“The user should be able to view market report for our car sales for the New England region for each quarter for our 2 brands.”
How you are going to create mockup screen for this user story? After analysis some of the facts become evident:
This screen is about a report.
There will be 2 screens. The first screen will have some features to select (quarterly / yearly report, which brand of cars, which region of the country, what kind of report etc.). Once the user selects the options, there will be some button to be clicked by the user to show appropriate results on next screen.
The next screen will show the desired report. The report will contain data for car sales for 2 chosen brands for the last ended quarter for New England region.
Now we will be able to create mockup screens discussed above on next slide.
While drawing a mockup screen, care should be taken about all aspects of a user story including all the acceptance criteria attached to a user story.

19. Chapter 6: User interface design and implementation
User interface modeling (mockup screens)

20. Chapter 6: User interface design and implementation
User interface modeling (mockup screens)