Rapid Application Development
Chapter 4 : Designing Graphical User Interface (GUI)
for RAD
Dr.Orawit Thinnukool
College of Arts, Media and Technology, Chiang Mai University
Content: Regula Stopper et.al
Content
• Graphical User Interface - Layout and Design
• Types of User Interfaces
• Graphical User Interface Design
• GUI Examples
• GUI Examples for Development RAD
• Designing Input for Microsoft Access
• Designing Output for Microsoft Access
• Designing GUI for Application on Android
Graphical User Interface - Layout and Design
You will be able…. this chapter 1. To explain what a Graphical User Interface (GUI) is and what it is
good for.
2. To design a Graphical User Interface for an interactive map.
1. Graphical User Interface of Microsoft Paint 2. Graphical User Interface of R program
Graphical User Interface - Layout and Design
Graphical User Interface - Layout and Design
Today, we (Mac, Linux and Windows-Users) expect to interact with the
computer using a mouse, launching programs by clicking on icons, and manipulate
various windows on the screen using graphical controls.
Mac
GUI
revolution
Such user interfaces
are called Graphical
User Interfaces (GUI),
since they use graphics
and pictures to
represent the input and
output of a program.
Graphical User Interface - Layout and Design
When designing a Graphical User Interface, it is important
that the needs, wants, and limitations of the end users (who finally use the
program) are given extensive attention.
When we will developed RAD program, there exist a few rules for the design
of Graphical User Interfaces which will be listed in this lesson.
Types of User Interfaces
To work with a system, the users need to be able to control the system and
assess the state of the system
We here give you just two examples:
• Command-Line Interface (CLI): 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.
• Graphical User Interface (GUI): The use of pictures rather than just words to
represent the input and output of a program. Input is accepted via devices such as
keyboard and mouse.
Picture for illustrated : CLI Picture for illustrated : GUI
Graphical User Interface Design
1. Visual Communication
2. User Interface Design
3. User-Centered Design
4. General Design Principles
5. GUI Controls
6. Techniques for Getting
the User's Attention
G U I
Designing a user interface may seem a simple and side aspect
of the development of an entire application. Seven points is the most
important part of the development of an application follows;
GUI : Visual Communication
We will show you what GUI controls exist and how you can get the user's
attention on the screen. Marcus, A., (1992) explains three basic principles of
visual communication are:
- Organization: Give the user a simple, clear, and consistent conceptual
structure.
- Economy: Maximise the effectiveness of a minimal set of tools.
- Communication: Adjust your presentation to the intake capacity of your
users.
What is this ?
1. Ice-cream
2. The moon
3. Lemon
4. Ball
Visual Communication is important
to make clearly communication.
GUI : User Interface Design
Design in General and Common
- A developer or designer should focus on the needs of the end users.
- What points that user want to use ?
- Design for who ?
Big
Easy
Cleary function
GUI : User-Centered Design
The process from the idea of a project until to design GUI for RAD program its
realisation and usage. You need to consider three point follows:
(picture sources :enabled.com)
1. Usefulness relates
to relevance: do the
functions, information,
etc. match what the
user actually needs?
2. Usability relates to
ease-of-use - a simple
concept, but not always
easy or intuitive to
implement.
3. Visual Design
Refers to layout
recommendations and
to the use of graphical
elements.
GUI : General Design Principles
Good design or bad Design ?
General design principles have been called "Golden Rules“ , which by Plaisant
(2005) designed eight principles;
1. Strive for consistency
2. Cater to universal usability
3. Offer informative feedback
4. Design dialogs to yield closure
5. Prevent errors.
6. Permit easy reversal of actions.
7. Support internal locus of control.
8. Reduce short-term memory load.
X
No universal usability
No consistency !!
Best Practices for Designing an Interface
Everything stems from knowing your users, including
understanding their goals, skills, preferences, and
tendencies. Once you know about your user, make sure to
consider the following when designing your interface:
Keep the interface simple.
Create consistency and use common UI elements
Be purposeful in page layout.
Strategically use color and texture.
Use typography to create hierarchy and clarity.
Make sure that the system communicates what’s happening.
Think about the defaults.
Details : Best Practices for Designing an Interface
Details : Best Practices for Designing an Interface
GUI : GUI Controls
A graphical user interface basically consists of windows and
containers (Boxes/Panels/Panes). Within these elements, there are various GUI
Control tools. For Example, there exist four groups of GUI Controls:
1. Input Elements (input field, slider, button, etc.)
2. Output Elements (output field, status bar, etc.)
3. Selection Elements
(radio button, checkbox, combobox, listbox, etc.)
4. Action Elements (toggle button, etc.)
Design of GUI Controls
Design of GUI Controls
Many GUI Controls are buttons. A
button is a widget which is
clickable and which provides the
user a simple way to
trigger an event
button
Check box
GUI : Techniques for Getting the User's Attention
Some techniques for getting user's attention are widely employed in user
interfaces. They are derived from empirical studies and can be summarized as
follows: (Marinilli 2003)
-Animation : Animation is often used to express the GUI internal state, signaling work in
progress or activity in general.
- Colour : Like animation, this technique should be used wisely. Too many colours tend to
produce confusing GUIs.
- Sound : As with technique, when used wisely, can be very effective. Indeed, when dealing
with disabled people, sound signals could offer an effective feedback means.
Look better ? Look better ?
GUI : Techniques for Getting the User's Attention
-Graphic Adornments
When used wisely and coherently, these graphic conventions could be effective
without being disruptive.
Wisely used graphical adornments
Jakop’s Principle of Design
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10.Help and documentation
Summary of GUI Design
- It is important for designers to be aware of the different mental representations
involved in the creation and consequent use of a user interface.
-The design of a User Interface should always give extensive attention at the needs,
wants, and limitations of the end users of an interface. This design philosophy is
called User Centered-Design (UCD).
- GUI control tools are tools that allow the user to interact with the system. There
exist four groups of GUI Controls:
1. Input Elements
2. Output Elements
3. Selection Elements
4. Action Elements
- User's AttentionThere are several techniques to get the user's attention:
1. Animation
2. Colours
3. Sound
4. Graphic Adornments
GUI Examples for Development RAD
We here present you a few GUI examples for rapid program with Microsoft Access
We explain shortly the possibilities of the applications and highlight the segmentation
of the GUIs
12
3
GUI Examples: Web Application Software
Google Maps is a map search engine. You can search for an arbitrary location or
route. The address(es) of the location or route must be typed in an input bar. The map
then directly zoomes to this location. You can zoom and pan in the map and adjust
the map's appearing by toggling three map layers.
Navigation
Map Function
Object quires Function
Spatial Function
Task
Menu
Menu
GUI Examples: Web Application Software
Menu
Title of system
Menu
FooterFunction
GUI Examples: Application Software
Title of system
Function
Task (input)
Display Results
Designing Input for Microsoft Access
1 2 3
Button
Textbox
Check box
Designing GUI for Application on Android
Application on Mobile device is
a system that allows developer
or designer create Applications
for iPads, computers and others
systems.
People can use Case tool like
inventor to create/develop
games, learning systems and
other useful application that
support everyday life.
This is an example for design
GUI for development RAD
application by Case tool.
Menu Items
Input Textbox
Material and Design on Android App
Material design is a comprehensive guide for visual,
motion, and interaction design across platforms and
devices. Android now includes support for material
design apps especially on developing RAD.
Nowadays, Android provides the following elements
for you to build material design apps:
- A new theme
- New widgets for complex views
- New APIs for custom shadows
and animations
Material and Design on Android App
Material Theme
The material theme provides a new style for application and,
system widgets that let you set their color palette, and default
animations for touch feedback and activity transitions.
Cr Picture: https://www.developer.com
Dark material theme Light material theme
Lists and Cards
View Shadows
In the past GUI deign has been created to
the X and Y properties, Nowadays, views in
Android have a Z property. This new
property represents the elevation of a view,
which determines:
- The size of the shadow: views with higher
Z values cast bigger shadows.
- The drawing order: views with higher Z
values appear on top of other views.
Cr Picture: https://www.developer.com
Animations
The new animation APIs can be created custom animations
for touch feedback of GUI controls on mobile device, it can be
changes in view state, and activity transitions.
(developer.android.com)
- To respond to touch events in your views with touch feedback
animations.
- Hide and show views with circular reveal animations.
- Switch between activities with custom activity transition
animations.
- Create more natural animations with curved motion.
- Animate changes in one or more view properties with view
state change animations.
- Show animations in state list drawables between view state
changes.
Drawables
These new capabilities for drawables
help developer implement material
design application.
Vector drawables are scalable
without losing definition and are
perfect for single-color in-app icons.
Drawable tinting lets developer define
bitmaps as an alpha mask and tint
them with a color at runtime.
Color extraction lets developer
automatically extract prominent colors
from a bitmap image.
An example of Designing GUI
for Application on Android
Check boxInput via Tab on Keyboard
Menu Items
Reference
