4.1.

Introduction to Developing a User Interface

Introduction

To work with a system, the users have to be able to control and assess the state of the system. For
example, when driving a vehicle, the driver of the vehicle uses the steering to control the
direction, and the accelerator pedal, brake pedal and gears to control the speed of the vehicle.
The driver understands the position of the vehicle by looking through the windshield and the
exact speed of the vehicle by checking the speedometer. The driver's interface of the automobile
is on the whole composed of the instruments that the driver can use to accomplish the tasks of
driving and maintaining the automobile. Interactive entities must constantly be designed to
support the way in which humans interact with the world and information.

In information technology, the user interface is everything designed into an information device
with which a human being may interact -- including the monitor, keyboard, mouse, the
appearance of a desktop, characters in text, help messages, and how an application or a Web site
invites interaction and responds to it. In the previous generations of computers, there was very
little user interface except for a few buttons at an operator's console. The user interface was
mainly in the form of punched card input and report output.

Later, a user was provided with the ability to interact with a computer online and the user
interface was a nearly blank display screen with a command line, a keyboard, and a limited set of
commands and computer responses that were exchanged. This command line led to a new form
of interface in which menus (list of choices written in text) predominated. Eventually, the
graphical user interface (GUI) arrived, originating predominantly in Xerox's Palo Alto Research
Center, adopted and enhanced by Apple Computers, and finally standardized effectively by
Microsoft in its Windows operating systems.

The user interface can, essentially include the total "user experience," which may include the
aesthetic appearance of the device, response time, and the content that is presented to the user
within the context of the user interface.

Different types of User Interface

The three most common types of User Interfaces are:

Command Line Interface (CLI)

Graphical User Interface (GUI)

Web User Interface (WUI)

However, a few other types of User Interfaces also exist

 Touch User Interface(CLI)

Voice User Interface

Command Line User Interface:

In a command line user interface, the user provides the input by typing a command string with
the computer keyboard and the system provides output by printing text on the computer monitor.
This is normally used by programmers and system administrators, and by technically advanced
personal computer users.

A good example of command line user interface is the windows command prompt, as seen in the
image below.

The advantages of using a command line user interface are:

Consumes low bandwidth As the command line interface is devoid of any graphics or
extra data, this is especially useful in a networked environment where network traffic is
to be limited.

Appeals to expert users as the commands relevant to a particular task give information
about that task only, any other extra data/information that could potentially cause a
distraction to the user are easily avoided.

However this type of user interface poses the following disadvantages too:

Learn-ability and Retention of commands is generally poor this is especially

applicable to non-expert users, who would find learning and remembering individual
commands of each task difficult. Hence they won't be comfortable with the command line
interface.

Not very user friendly and hence error rates are high especially when a user is
trying to enter data. A mistake made in typing while using command line is often not
forgiven. That is, a user is usually not warned or prompted for confirmation while using
direct commands in the command line. Hence chances of wrong data being entered are
very high.

Graphical User Interface (GUI):

Graphical User Interface is a type of user interface that allows users to interact with computers
using images rather than text commands. A GUI presents the user with information and actions
available to a user through graphical icons (like My Computer, Recycle Bin icons in Windows)
and visual indicators such as secondary notation, as against text-based interfaces, typed
command labels or text-based navigation. The actions are generally performed through direct
manipulation of the graphical elements (such as clicking on the icons, double clicking etc).

GUI typically allows user interaction with the system through the use of visual elements, such as
windows, buttons, tables, forms, menus, etc. thus freeing the user from learning complex
command languages. This kind of interface takes advantage of the computer's graphics
capabilities to make the program easier to use.

A typical GUI looks like the one in the image below

Basic Components of a GUI:

Pointer - A symbol that appears on the display screen and that you move to select objects and
commands. Usually, the appearance of the pointer is that of a small angled arrow. Word-
processing applications, use an I-beam pointer instead, that is shaped like a capital I.

Pointing device - A device, such as a mouse or trackball, that enables you to select objects on
the display screen.

Icons - Small pictures that represent windows, files or commands. By moving the pointer to the
icon and clicking the mouse button, you can convert the icon into a window or execute a
command. You can also move the icons around the display screen as if they were real objects on
your table.
Windows - You can divide the screen into different areas. In each window, you can display a
different file or run a different program. You can change the size and shape of the windows and
even move them around the display screen at will.

Menus - Most graphical user interfaces let you execute commands by selecting a choice from a
menu.

Toolbars - Represent a group of buttons that perform related functionality and generally have
icons over them instead of text.

Use of GUI over Command line user interface provides us with the following benefits:

Increase in productivity for normal users, there is no need for any specific training for the
users to start using a well designed GUI. The users do not need to learn or remember any
commands to effectively use a GUI.

Decrease in training cost and support line cost (saving time and money) A well designed
and consistent GUI does not require any training for the users. Also the users are less likely to
get stuck while trying to find a way around getting used to the application. Hence the training
and support costs are significantly reduced.

Increase in customer satisfaction (aggravation and frustration are reduced) Most users are
used to Windows and general graphical tools. Hence a simple, consistent and well-designed
interface will enable the users to get used to a new application faster.

Web User Interface (WUI):

WUI is a subset (or a type of) of Graphical User Interface (GUI). WUI accepts inputs and
provides output by generating web pages which are transmitted via the Internet and viewed by
the user using a web browser program.

A typical WUI is depicted in the image below

All Benefits and Attributes that apply to GUI also apply to a WUI.

4.2. What is the need for a good UI

What is the need for a good UI?

For most of the end users, User Interface is the System. Hence the look and feel that a User
Interface provides is one of the major factors that decide the User Satisfaction and User
Experience. For example, if cost isn't a factor for the same function (of making calls), which one
out of the two phones below would you prefer??

A remarkably good User Interface Design can act as the difference between product acceptance
and rejection in the marketplace.
A cumbersome, not easy to learn/ use UI in an otherwise excellent product could result in the
failure of that product. Good User Interface can make a product easy to understand and/or easy
to use, which results in greater user acceptance. Poor user interface is the reason why many
software systems are never even used.

A badly designed user interface can cause a user to make catastrophic errors.

The best example of this from real world is the "Butterfly Ballot" used in Palm Beach, Florida
during the 2000 U.S. presidential election which was a fiasco primarily due to the design of a
confusing user interface.

If the designers of that ballot understood the basics of user interface design, there may very well
have been a different outcome to the election.

4.3. Basic steps to be followed for developing a good UI

Just like customers form perceptions about the company by looking at its office or retail shop, in
case of the internet world, a good-looking website is the first experience that your customers
have with a brand online. How they perceive the brand is likely to be influenced quite
significantly by the quality of the UI and the overall experience of the online property.

Users do not care much about what is underneath. But they are actually influenced a lot by what
they experience, what they feel, and what they see. In other words, it is the design quality that
essentially affects the business results.
Good design and user interface not only impact the consumers, but also influence the decision of
potential investors.

From a non-designer's perspective, well thought-out and executed design is subtle, yet very
powerful. Product User Interface (UI) and User Experience regardless of the software, mobile,
or web, the Ease of Use is one of the biggest key factors for its popularity.

The below pointers must be taken into consideration when designing a good User Interface:

Consistency - The most important thing you can possibly do is to ensure that your user interface
works consistently. For eg., if you can double-click on items in one list and produce a certain
action, then you should be able to double-click on items in any other list and have the same kind
of action to happen. Place your buttons in consistent places on all the windows, use the same
kind of wording in labels and alert messages, and use a consistent theme of colors throughout.
Consistency in your user interface makes it easier for the user to get used to the interface quicker.

Be prepared to hold the line - When you are developing the user interface for your system you
will discover that your stakeholders often have some unusual ideas as to how the user interface
should be developed. You may, of course, listen to these ideas but you also need to make your
stakeholders aware of your corporate UI standards and the need to conform to them.

Navigation between major pages - If it is difficult to move from one screen to another, then the
users of your website will obviously become frustrated and give up. When the flow across
screens matches the flow of the work the user is trying to accomplish, it becomes easier for the
users. Because different users work in different ways, the system needs to be flexible enough to
support their various approaches.

Wording the messages and labels effectively - The text displayed on the screens is a primary
source of information for the users of the web application. If the text is worded inappropriately,
then the interface will be perceived poorly by the users. Using full words and sentences, as
against codes and abbreviations, makes the text easier to understand. Messages should be worded
positively, implying that the user is in control, and providing insight into how to use the
application properly. For example, considering the two messages ahead which one do you find
more appealing? An account number should be eight digits in length or You have input the
wrong information. The messages should also be worded consistently and displayed in a
consistent place on the screen. Although the messages The persons first name must be input
and An account number should be input are worded well when looked at separately, however,
together they are inconsistent. A better wording of the second message would be The account
number must be input to make the two messages consistent.

Use color appropriately - Color should be used sparingly in the webpages and, if used, a
secondary indicator must also be used. The problem is that some of the users may be color blind
and if color is used to highlight something on a screen, then something else must be done to
make it stand out for those users to notice it. Colors must be used consistently, so as to have a
common look and feel throughout.
Follow the contrast rule - If you are going to use color, you need to ensure that your screens are
still readable. The ideal way to do this is to follow the contrast rule: Use dark text on light
backgrounds and light text on dark backgrounds. Reading dark blue text on a white background
is easy, but reading blue text on a dark red background is difficult. The problem is that of enough
contrast not existing between blue and red to make it easy to read, whereas there is adequate
contrast between blue and white.

Expect your users to make mistakes - How many times have you accidentally deleted some
text in one of your files or deleted the file itself? Were you able to recover from these mistakes or
were you forced to redo hours, or even days, of work? The reality is that to err is human, so you
should design your user interface to recover from mistakes made by your users.

Dont create crowded user interfaces Crowded screens are difficult to understand, and, hence
are difficult to use. Users would not be interested in working with a busy/crowded webpage than
one with limited functionalities spread neatly across the page. Just think whether Google.com
would've got all the popularity if it had not started out as a page with a simple search function?

Group things effectively - Items that are logically connected should be grouped together on the
screen to communicate their connection, whereas items that have nothing to do with each other
should be separated. You can use spaces generously between collections of items to group them
and/or you can put boxes around them.

Basic tools (technology) for User Interface development

Many technologies/tools exist today that could be used for making user friendly user interfaces.
Some of the more modern technologies like ASP.NET, Jsp etc are used, that can make the
webpages interesting and interactive to the uses. Here we focus on two simple tools that are used
for making static pages (pages that hold only the information to be read/consumed by the user)
HTML and CSS.

HTML:

When you look at a web page in a browser, you see words, at the simplest level. These words
usually appears with some style characteristics, such as different colors and font sizes. Generally,
a page also displays images or may be video. Sometimes there is a form where you can enter (or
search) for information, or change the display of the page to your liking. Sometimes a page
contains animated content and content that changes while the rest of the page remains the same.

Several technologies (such as JavaScript, CSS, AJAX, Flash, JSON) can be used to define the
elements of a web page. However, a web page is defined, at the lowest level, using HTML
(HyperText Markup Language). Without HTML, there will be no web page.

A brief history of HTML

In the late 1980s, Tim Berners-Lee was working as a physicist at CERN (the European
Organization for Nuclear Research). He came up with a way for scientists to share documents
over the Internet. Before his invention, communication via the internet was limited to plain text,
using technologies such as email, FTP (File Transfer Protocol), and Usenet-based discussion
boards. The HTML invention made use of a model of content stored on a central server that
could be transferred and displayed on a local workstation via a browser. It simplified content
access and enabled the display of "rich" content (such as sophisticated text formatting and the
display of images).

What is HTML?

HTML is a markup language. It tells the web browser how to display content. HTML separates
"content" (words, images, audio, video, and so on) from "presentation" (the definition of the type
of content and the instructions for how that type of content should be displayed). HTML uses a
set of pre-defined elements to identify content types. Elements contain one or more "tags" that
contain or express content. Tags starts and ends with angle brackets, and the "closing" tag (the
one that indicates the end of the content) is prefixed by a forward slash.

For example, the paragraph element consists of the start tag "<p>" and the closing tag "</p>".
The following example show a paragraph contained within the HTML paragraph element

<p>My dog ate all the guacamole.</p>

The browser uses the tags to indicate how to display the content in the tags.

Elements that contain content can usually also contain other elements. For example, the bold
element ("<b>") can be embedded within a paragraph element:

<p>My dog ate <b>all</b> the guacamole.</p>

When displayed, this looks like the figure above.

Some elements do not contain other elements. For example, the image tag ("<img>") simply
specifies the file name of the content (an image) as an attribute: <img src="smileyface.jpg">
Often a forward slash is placed before the final angle bracket to indicate the end of the tag. In
HTML this is optional, but required in XHTML (which is an XML schema that implements
HTML elements).

HTML Elements the basic building blocks

HTML consists of a set of elements. These elements define the semantic meaning of the content.
Elements include everything between two matching element tags, including the tags themselves.
For instance, the "<p>" element indicates a paragraph; the "<img>" element indicates an image.

Some elements have very precise meaning, as in "this is an image," "this is a heading," or "this is
an ordered list." Others are less specific, such as "this is a section on the page" or "this is part of
the data." Whereas some others are used for technical reasons, such as "this is identifying
information for the page that should not be shown." Regardless of the reason, in one way or
another all HTML elements have a semantic value.

Most elements may contain other elements, forming a hierarchic structure. A complete but a very
simple web page looks like this:

<html>

<body>

<p>My dog ate all the guacamole.</p>

</body>

</html>

As you can see, <html> elements surround the rest of the document, and <body> elements
surround the page content. This structure is often thought of as a tree with branches (in this case,
the <body> and <p> elements) growing from the trunk (<html>). This hierarchical structure is
called the DOM: the Document Object Model.

HTML Tags

HTML documents are written in plain text. It can be written in any text editor that allows content
to be saved as plain text (although most HTML authors prefer to use a specialized editor that
highlights syntax and shows the DOM structure). Tag names may be written in either upper or
lower case. However, the W3C (the global consortium that maintains the HTML standard)
recommends using lower case (and XHTML requires lower case).

HTML attaches special meaning to anything that starts with the less-than sign ("<") and ends
with the greater-than sign (">"). Such markup is called a tag. Here is a simple example:

<p>This is text within a paragraph.</p>

In this example there is a start tag and ends with a closing tag. Closing tags looks the same as the
start tag but also contain a forward slash immediately after the leading less-than sign. Almost all
the elements in HTML are written using both start and closing tags. The starting and closing tags
should be appropriately nested, that is closing tags should be written in the opposite order of the
start tags. Proper nesting is the one rule that must be obeyed in order to write valid code.

This is an example of valid code:

<em>I <strong>really</strong> mean that</em>

This is an example of invalid code:

Invalid: <em>I <strong>really</em> mean that</strong>

Note that in the first example, the closing tag for the nested element is placed before the closing
tag for the element in which it is nested.

Some elements do not contain any text content or any other elements as such. Empty elements
such as these need no closing tag. Below is an example:

<img src="smileyface.jpg">

Many people mark up such empty elements by using a trailing forward slash (which is
mandatory in XHTML).

<img src="smileyface.jpg" />

In HTML this slash has no technical functional significance and using it is a pure stylistic choice.

Attributes

The start tag may contain additional information, as in the below example. Such information is
called an attribute. Attributes usually contains 2 parts:

An attribute name.

An attribute value.

A few attributes can only have a single value. They are Boolean attributes and may be shortened
by only specifying the attribute name or leaving the attribute value empty. Thus, the below 3
examples have the same meaning:

<input required="required">

<input required="">
<input required>

Attribute values that consist of a single word or number may be written as they are, but when
there are two or more strings of characters in the value, it must be enclosed within quotation
marks. Both single and double quotes are allowed. Most web developers prefer to always use
quotes to make the code less ambiguous to the eye and to avoid mistakes. The below code
includes such a mistake:

<p class="foo" bar> (Beware, this probably does not mean what you think it means.)

In the above example the value of class was supposed to be "foo bar" but since there were no
quotes the code is interpreted as if it had been written like this:

<p class="foo" bar="">

Named Character References in HTML

Named character references (often casually called entities) are used to print characters that have
a special meaning in HTML. As seen earlier, HTML interprets the less-than and greater-than
symbols as tag delimiters. When you want to show a greater-than symbol in the page, a named
character reference can be used. There are four common named character references one must
know:

&gt; denotes the greater than sign (>)

&lt; denotes the less than sign (<)

&amp; denotes the ampersand (&)

&quot; denotes double quote (")

The above four are the most important, among many more entries, because they represent
characters that have a special meaning in HTML

Doctype and comments

In addition to tags, entities and text content, an HTML document must contain a doctype
declaration as the first line. This is written like this:

<!DOCTYPE html>

The doctype has a long history, but for now all you may need to know is that this doctype tells
the browser to interpret the HTML and CSS code according to W3C standards and not try to
pretend that it is Internet Explorer from the 90's.
HTML has a mechanism for embedding comments that are not displayed when the page is
rendered in a browser. Comments are very useful for explaining a section of markup, or making
notes for other people who might work on the page, or for leaving some kind of reminders for
yourself. Comments in HTML are enclosed in symbols such as shown below:

<!-- This is comment text -->

A complete but small document

Putting this together here is a tiny example of an HTML document. The below text can be copied
to a text editor, save it as myfile.html and open it in using browser. It must be ensured that the
document is saved using the character encoding UTF-8. As this document uses no styling it will
look very plain, but it is only a start.

<!DOCTYPE html>

<html lang="en"

<head>

<meta charset="utf-8" />

<title>A tiny document</title>

</head>

<body>

<h1>Main heading in my document</h1>

<!-- Note that it is "h" + "1", not "h" + the letter "one"

<p>Loook Ma, I am coding <abbr title="Hyper Text Markup

Language">HTML</abbr>.</p>

</body>

</html>

For further learning of basic HTML please refer to the tutorial in the link below:

www.w3schools.com/html/default.asp
CSS

HTML was originally designed as a simple way of presenting information, with far less
importance given to the aesthetics of a web page than the content (and largely being left up to the
web browser). Now that the web has become as popular as it has, the content presentation has
become almost critical to a websites success. CSS is a technology which is a key in presentation,
used to design websites.

In the late 90s, HTML coders noticed that they were retyping the same old tags again and again
on the same page, leading to larger HTML files and above all, more time was consumed in this
unfruitful process, which further led to frustration. You may also have found yourself in the same
situation, adding in mountains of <font> tags, despite wanting them all the same; or using tricks
like invisible gifs for spacing.

Then, someone had a great idea: have one file that defines all the values that those piles of tags
would have done, and then have the pages checking this file and formatting the content pages
accordingly. You can hence leave out most of the formatting tags in HTML and use only nice
structural elements (such as headings, paragraphs and links) separating structure and
presentation.

In late 1996 CSS (Cascading StyleSheets) became a reality, acting as a partner to your HTML
code; taking care of all the layout, fonts, colors and overall look of your site.

If you ever decide to change the look of your site, you modify that one CSS file (your style
sheet) and all the HTML pages reading from that file will display accordingly. This makes
maintenance of your design much easier.

CSS Syntax

The syntax for CSS is different than that of HTML markup. It mainly consists of only 3 parts.

selector { property: value }

The selector is the HTML element that you want to style. The property is the title of the actual
property, and the value is the style you apply to that property.

Each selector can have multiple properties, and each of those properties within the selector can
have independent values. The value and property are separated with a colon and contained within
curly brackets. Multiple properties have to be separated by a semi colon. But a comma is used to
separate multiple values within a property, and if an individual value contains more than one
word you surround it with quotation marks. A sample of this is shown below

body {

background: #eeeeee;
 font-family: Times New Roman, Calibri;}

As you can see in the above code we have separated the color from the font-family with a semi-
colon, various fonts are separated with commas and contained the Times New Roman within
quotation marks. The end result sets the body color to light gray, and sets the font to ones that
most users will have installed on their computer

Different ways to apply CSS on HTML

1. Internal Stylesheet

First we will explore the internal method. Here you are simply placing the CSS code within the
<head></head> tags of each HTML file you want to style with the CSS. The syntax for this is
shown in the example below.

<head>

<title><title>

<style type=text/css>

CSS Content Goes Here

</style>

</head>

<body>

With this method each HTML file contains the CSS code needed to style the page. This means
that any changes you want to make to one page, the same have to be made to all. This method
works best when you need to style only one page, or if you want individual pages to have
varying styles.

2. External Stylesheet

Next we will explore the external method. Using any text or HTML editor such as 'Notepad', an
external CSS file can be created. A CSS file contains no HTML, only CSS. You simply save it
with the .css file extension. You can associate the file externally by placing one of the following
links in the head section of every HTML file you want to style with the CSS file.

<link rel=stylesheet type=text/css href=Path To Stylesheet.css />

Or you can also use the @import method as shown below

<style type=text/css>@import url(PathToStylesheet.css)</style>

Both these methods are achieved by placing one or the other in the head section as shown in
example below.

<head>

<title></title>

<link rel=stylesheet type=text/css href=Path To Stylesheet.css />

</head>

<body>

or

<head>

<title></title>

<style type=text/css> @import url(Path To Stylesheet.css) </style>

</head>

<body>

By using an external style sheet, all of your HTML files link to one CSS file in order to style the
pages. Meaning, that if you need to alter the design of all your pages, you only need to edit one
.css file to make global changes to your entire website.

Here are a few reasons this is better

Easier Maintenance

Reduced File Size

Reduced Bandwidth

Improved Flexibility

3. Inline Styles

In a way this method of stylesheets defeat the purpose of using CSS in the first place. Inline
styles are defined right in the HTML file along side the element you want to style. An example is
shown below.

<p style=color: #ff0000;>Sample red text</p>

Inline styles does NOT allow the user to change styles of elements or text formatted this way

Which is better?

So with all these various ways of inserting CSS into your HTML files, you may now be
wondering which is better, and if more than one method is used, in what order do these different
ways load into the browser?

All the different methods will cascade into a new pseudo stylesheet in the following order:

1. Inline Style (inside HTML element)

2. Internal Style Sheet (inside the <head> tag)

3. External Style Sheet

As far as which way is better, depends on what you want to do. If only one file need to be styled
then placing it within the <head></head> tags (internal) will work fine. Whereas if you are
planning on styling multiple files then the external file method is the way to go.

Choosing between the <link related=> & the @import methods are completely up to you. I will
mention that the @import method may take a second longer to read the CSS file in Internet
Explorer than the option.

To learn how to implement CSS in HTML pages, refer the link below

www.w3schools.com/css/default.asp

Conclusion

With the use of HTML and CSS you'd be able to develop attractive looking webpages. But these
webpages would only contain static information. That is the users can only read/consume the
information that you have on the pages. No user interaction would be possible with static pages.

But the good news is, there are various other technologies using which the webpages can be
made dynamic. Examples of those technologies are asp.net, jsp, javascript etc. The discussion on
specific technologies are out of the scope of this curriculum. However for further reading you
may refer the website below.