CS1015 User Interface Design

UNIT I
Introduction

 Defining the User Interface 

It is the parts of the computer and its software that people can touch ,
feel, talk to ,or otherwise understand and direct. It is a sub field to Human-computer interaction
study.
User interface design is a subset of a field of study called human computer
interaction.(HCI). HCI is the study,planning and design of how people and computers work
together.User interface has 2 components: Input, Output

Input is how a person communicates his or her needs or desires to the computer.

Ex. Keybord,mouse.

Output is how the computer conveys its results of its computations and requirements to the user.

Ex. Display screen

Importance of good design:

 The Importance of Good Design 

Its very important to our users.
It is the window to view the capabilities of the system
The reasons for ineffient and confusing design is,

 No care on design 
 Not enough time 
  Not knowing what really makes good design 
 Not possessing common sense. 
A well designed interface and screen is very important to the users.it is the main window to
view the capabilities of the system.A screen design affect a person in a variety of ways. If the
design is confusing and inefficient, people will have greater difficulty and make more
mistakes,Chase some people away from the system.It also leads to aggravation,frustration and
increased stress.

Benefits of good design:

 Poor clarity forced screens force the users to take more time to
process. The screen clarity and reability is done by making
 screens less crowded.Seperate items are placed in separate lines. 
 Reformatting enquiry screens with good design principles 
  Increase productivity 
 Good recognization of the system 

Human Computer Interface:
The human–computer interface can be described as the point of communication
between the human user and the computer. The flow of information between the human and
computer is defined as the loop of interaction. The loop of interaction has several aspects to it
including:
 Task Environment: The conditions and goals set upon the user. 

 Machine Environment: The environment that the computer is connected to, i.e a laptop
in a college student's dorm room. 

 Areas of the Interface: Non-overlapping areas involve processes of the human and
computer not pertaining to their interaction. Meanwhile, the overlapping areas only
concern themselves with the processes pertaining to their interaction. 

 Input Flow: The flow of information that begins in the task environment, when the user
has some task that requires using their computer. 

 Output: The flow of information that originates in the machine environment. 

 Feedback: Loops through the interface that evaluate, moderate, and confirm processes
as they pass from the human through the interface to the computer and back. 
Introduction of the Graphical User Interface:
A graphical user interface (GUI), often pronounced gooey, is a type of user interface that
allows users to interact with programs in more ways than typing such as computers.Graphical
user interfaces, such as Microsoft Windows and the one used by the Apple Macintosh, feature
the following basic components:
· pointer : A symbol that appears on the display screen and that you move to select
objects and commands. Usually, the pointer appears as a small angled arrow. Text -
processing applications, however, use an I-beam pointer 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 commands, files, or windows. By moving the
pointer to the icon and pressing a mouse button, you can execute a command or convert
the icon into a window. You can also move the icons around the display screen as if they
were real objects on your desk.

· desktop : The area on the display screen where icons are grouped is often referred to
as the desktop because the icons are intended to represent real objects on a real desktop.

· windows: You can divide the screen into different areas. In each window, you can run
a different program or display a different file. You can move windows around the display
screen, and change their shape and size at will.

· menus : Most graphical user interfaces let you execute commands by selecting a choice
from a menu.
Advantages
 Symbols recognized faster than text 
  Faster learning 
 Faster use and problem solving 
 Easier remembering 
  More natural 
 Exploits visual/spatial cues 
  Fosters more concrete thinking 
 Provides context 
 Fewer errors 
  Increased feeling of control 
 Immediate feedback 
  Predictable system responses 
 Easily reversible actions 
 Less anxiety concerning use 
  More attractive 
 May consume less space 
 Replaces national 
  Easily augmented with text 
 Low typing requirements 

 Smooth transition from command language system 

Disadvantages 
 Greater design complexity 
 Learning still necessary 
  Lack of experimentally-derived design principles 
 Inconsistencies in technique and terminology 
  Working domain is the present 
 Not always familiar 
 Human comprehension limitations 
  Window manipulation requirements 
 Production limitations 
 Few tested icons exist 
  Inefficient for touch typists 
  Inefficient for expert users 
  Not always the preferred style of interaction 
  Not always the fastest style of interaction 
 Increased chances of clutter and confusion 
  The futz and fiddle 
  May consume more screen space 
 Hardware limitations 
Characteristics Of The Graphical User Interface:

 Sophisticated Visual Presentation 

  Pick-and-Click Interaction 
 Restricted Set of Interface Options 
 Visualization 
  Object Orientation 
 Use of Recognition Memory 
 Concurrent Performance of Functions 

Direct Manipulation System:

Direction manipulation system is one in which the user is able to select an object and
then specify which actions are to be taken.

  System is portrayed as extension of real world 

 Continuous visibility of objects and actions 
 Virtual reality 
  WYSIWYG 
 What you see is what you get 
  Actions are rapid and incremental with visible display of results 
 Incremental actions are easily reversible 
Example:
The "trash" on the desktop is an excellent example of direct manipulation within
computer systems. Users can see both the trash and the files or folders they want to move to the
trash. They then physically select the files and drag them to the trash can. While the user is doing
this, all of the selected files move as well, illustrating which items the user has selected. When the
mouse is placed over the trash, there is a shading indication that it has been selected. The user
then has to release the mouse button to move the files to the trash. If there are many files, a
dialogue box will show up illustrating the progress of moving files to the trash. Once the action is
completed, the files are no longer visible in their original location. The user can change her mind
at any time while dragging the files to the trash. Even after placing them there, they can as easily
be taken out of the trash and put back in place.

Indirect Manipulation

  Results from: 
  Operations being difficult to conceptualize in the graphical system 
 Graphics capability of the system being limited 
 Amount of space available for placing manipulation controls in the window 
border being limited

Difficulties for people to learn and remember all the necessary operations and
actions
 Web User Interface:
 Interaction Styles 
  The Graphical User Interface 
 The Popularity of Graphics 
 The Concept of Direct Manipulation 
  Advantages / Disadvantages 
 Characteristics of the Graphical User Interface 
  The Web User Interface 
 The Popularity of the Web 
  Characteristics of a Web Interface 
 The Merging of Graphical Business Systems
 and the Web 
 Characteristics of an Intranet vs. Internet 
 Extranets 
  Principles of User Interface Design 
 Principles for the Xerox STAR 
 General Principles 

The Blossoming of the World Wide Web:

The World Wide Web, abbreviated as WWW and commonly known as the Web, is a
system of interlinked hypertext documents accessed via the Internet. With a web browser, one
can view web pages that may contain text, images, videos, and other multimedia and navigate
between them via hyperlinks.

Functions of WWW:
The terms Internet and World Wide Web are often used in every-day speech without
much distinction. However, the Internet and the World Wide Web are not one and the same. The
Internet is a global system of interconnected computer networks. In contrast, the Web is one of
the services that runs on the Internet. It is a collection of interconnected documents and other
resources, linked by hyperlinks and URLs. In short, the Web is an application running on the
Internet. Viewing a web page on the World Wide Web normally begins either by typing the URL
of the page into a web browser, or by following a hyperlink to that page or resource. The web
browser then initiates a series of communication messages, behind the scenes, in order to fetch
and display it.
First, the server-name portion of the URL is resolved into an IP address using the global,
distributed Internet database known as the Domain Name System (DNS). This IP address is
necessary to contact the Web server. The browser then requests the resource by sending an HTTP
request to the Web server at that particular address. In the case of a typical web page, the HTML
text of the page is requested first and parsed immediately by the web browser, which then makes
additional requests for images and any other files that complete the page image. Statistics
measuring a website's popularity are usually based either on the number of page views or
associated server 'hits' (file requests) that take place.
While receiving these files from the web server, browsers may progressively render the page onto
the screen as specified by its HTML, Cascading Style Sheets (CSS), or other page
composition languages. Any images and other resources are incorporated to produce the on-
screen web page that the user sees. Most web pages contain hyperlinks to other related pages
and perhaps to downloadable files, source documents, definitions and other web resources. Such
a collection of useful, related resources, interconnected via hypertext links is dubbed a web of
information. Publication on the Internet created what Tim Berners-Lee first called the
WorldWideWeb (in its original CamelCase, which was subsequently discarded) in November 1990.
The Popularity of the Web:
The Web we know now, which loads into a browser window in essentially static
screenfulls, is only an embryo of the Web to come. The first glimmerings of Web 2.0 are beginning
to appear, and we are just starting to see how that embryo might develop. The Web will be
understood not as screenfulls of text and graphics but as a transport mechanism, the ether
through which interactivity happens. It will [...] appear on your computer screen, [...] on your TV
set [...] your car dashboard [...] your cell phone [...] hand-held game machines [...] maybe even
your microwave oven.Her use of the term deals mainly with Web design and aesthetics; she
argues that the Web is "fragmenting" due to the widespread use of portable Web-ready devices.
Her article is aimed at designers, reminding them to code for an ever-increasing variety of
hardware. As such, her use of the term hints at – but does not directly relate to – the current uses
of the term.
A similar difference can be seen between the Encyclopedia Britannica Online and
Wikipedia: while the Britannica relies upon experts to create articles and releases them
periodically in publications, Wikipedia relies on trust in anonymous users to constantly and quickly
build content. Wikipedia is not based on expertise but rather an adaptation of the open source
software adage "given enough eyeballs, all bugs are shallow", and it produces and updates articles
constantly.

Characteristics of a Web Interface:

Web 2.0 websites allow users to do more than just retrieve information. They can
build on the interactive facilities of "Web 1.0" to provide "Network as platform" computing,
allowing users to run software-applications entirely through a browser. Users can own the data
on a Web 2.0 site and exercise control over that data. These sites may have an "Architecture of
participation" that encourages users to add value to the application as they use it.
The concept of Web-as-participation-platform captures many of these characteristics. Bart
Decrem, a founder and former CEO of Flock, calls Web 2.0 the "participatory Web" and regards
the Web-as-information-source as Web 1.0.
The impossibility of excluding group-members who don’t contribute to the provision of goods
from sharing profits gives rise to the possibility that rational members will prefer to withhold their
contribution of effort and free-ride on the contribution of others. This requires what is sometimes
called Radical Trust by the management of the website. According to Best, the characteristics of
Web 2.0 are: rich user experience, user participation, dynamic content, metadata, web standards
and scalability. Further characteristics, such as openness, freedom and collective intelligence by
way of user participation, can also be viewed as essential attributes of Web 2.0.
Principles Of User Interface Design:

General Principles
 Accessibility   Immersion 
  Aesthetically Pleasing    Obviousness 
 Availability   Operability 
 Clarity   Perceptibility 
  Compatibility    Positive First Impression 
 Configurability   Predictability 
 Consistency    Recovery 
  Control   Responsiveness 
 Directness   Safety 
  Efficiency    Simplicity 
  Familiarity   Transparency 
  Flexibility   Trade-offs 
  Forgiveness   Visibility 

Accessibility
 Systems should be designed to be usable, without modification, by as many people as
possible. 
Aesthetically Pleasing
  Provide visual appeal by: 
  Providing meaningful contrast between screen elements 
  Creating groupings 
  Aligning screen elements and groups 
  Providing three-dimensional representation 
 Using color and graphics effectively and simply 
Availability
 
  Make all objects available at all times. 
 Avoid the use of modes. 

Clarity

 The interface should be visually, conceptually, and linguistically clear, including: 

  Visual elements 
 Functions 
  Metaphors 
 Words and text 
Compatibility
 Provide compatibility with the following: 
  The user 
 The task and job 
  The product 
 Adopt the user’s perspective. 
