Chapter 2
2.1
Visual Programming and
User Interface Design
1
Objectives
At the end of this lesson, you will be able to:
1. Understand the meaning of Visual Programming
2. Understand and apply general UI Design
Principles
3. Understand and aware on UI Design Issues
4. Understand and aware on User Interaction Styles
5. Understand and apply UI Design Process
2
Visual Programming
What is Visual Programming?
• Visual Programming is also known as Graphical User
Interface (GUI) Programming
• Visual Programming is a software development approach that
produces GUI-based application
• GUI allows a user to interact with a computer program using a
pointing device that manipulates objects on a computer
screen.
3
GUI-based Application
A GUI-based application has the following structure:
i. Create the icons and widgets that are displayed to a user
and organize them inside a screen window.
ii. Define functions that will process user and application
events.
iii. Associate specific user events with specific functions.
iv. Start an infinite event-loop that processes user events. When
a user event happens, the event-loop calls the function
associated with that event.
4
USER INTERFACE DESIGN
User interface Design is an essential part of the design
process in Visual Programming
i. UI Design should ensure that interaction between the human
and the machine provides for effective operation and control
of the machine.
ii. For software to achieve its full potential, the user interface
should be designed to match the skills, experience, and
expectations of its anticipated users.
5
7 UI DESIGN PRINCIPLES
1. Learnability
The software should be easy to learn so that the user can rapidly
start working with the software.
2. User familiarity
The interface should use terms and concepts drawn from the
experiences of the people who will use the software.
3. Consistency
The interface should be consistent so that comparable
operations are activated in the same way.
4. Minimal surprise
The behavior of software should not surprise users.
6
7 UI DESIGN PRINCIPLES
(cont.)
5. Recoverability
The interface should provide mechanisms allowing users to
recover from errors.
6. User guidance
The interface should give meaningful feedback when errors
occur and provide context-related help to users.
7. User diversity
The interface should provide appropriate interaction
mechanisms for diverse types of users and for users with
different capabilities (blind, poor eyesight, deaf, colorblind, etc.).
7
UI DESIGN ISSUES
User interface design should solve two key issues:
1. How should the user interact with the software?
2. How should information from the software be
presented to the user?
User interface design must integrate user interaction and
information presentation.
User interaction involves issuing commands and providing
associated data to the software.
8
6 Primary User Interaction
Styles
User interaction styles can be classified into the following 6
primary styles:
1. Question-answer
The interaction is essentially restricted to a single question-
answer exchange between the user and the software. The user
issues a question to the software, and the software returns the
answer to the question.
[Link] manipulation
Users interact with objects on the computer screen. Direct
manipulation often includes a pointing device (such as a mouse,
trackball, or a fin ger on touch screens) that manipulates an
object and invokes actions that specify what is to be done with
that object.
3. Menu selection
The user selects a command from a menu list of commands.
9
6 Primary User Interaction Styles
(cont.)
4. Form fill-in
The user fills in the fields of a form. Sometimes fields include
menus, in which case the form has action buttons for the user to
initiate action.
5. Command language
The user issues a command and provides related parameters to
direct the software what to do.
6. Natural language
The user issues a command in natural language. That is, the
natural language is a front end to a command language and is
parsed and translated into software commands.
10
UI Design Process
1. User Analysis
designer analyzes the users’ tasks, the working environment,
other software, and how users interact with other people
2. Software Prototyping
developing prototype software help users to guide the
evolution of the interface
3. Interface Evaluation
designers can observe users’ experiences with the evolving
interface
11