Introduction to Software Engg: Asma Sajid, Lecturer

CCSIS, GCUF
1

USER11INTERFACE
Lecture
DESIGN
 2

User Interface
• Designing Graphical User Interface (GUI) of for a software
• Data base, Desktop app, website, others…
• All have different GUI.
• Making a “ User centered design” for interface.
 3

Good User Interface ?

1. Good user interface design facilitates finishing the task at hand
without drawing unnecessary attention to itself.
2. Graphic design may be utilized to support its usability.
3. The design process must balance technical functionality and
visual elements
1. (e.g., mental model) to create a system that is not only operational but also
usable and adaptable to changing user needs.
4. Making application interfaces more natural, learnable, and
consistent.
5. Functionality oriented.
6. Defining a common look and feel for applications in a particular
desktop environment.
7. Understand Psyche of user.
 4

GUI Elements
• User interfaces use visual conventions to represent the
generic information shown.
• Some conventions are used to build the structure of the
static elements on which the user can interact, and define
the appearance of the interface.
1.Window
2.Menu
3.Icons
4.Controls (Buttons, Input boxes)
5. Tabs
• A tab is typically a rectangular small box which usually contains a text label or graphical icon
associated with a view pane.
• When activated the view pane, or window, displays widgets associated with that tab; groups of
tabs allow the user to switch quickly between different widgets.
 5

Windows
• A Container Window a window that is opened while invoking the icon of a mass
storage device, or directory or folder and which is presenting an ordered list of other
icons that could be again some other directories, or data files or maybe even
executable programs.
• A browser window allows the user to move forward and backwards through a
sequence of documents or web pages. Web browsers are an example of these types of
windows.

• Text terminal windows are designed for embedding interaction with text user
interfaces within the overall graphical interface. MS-DOS and UNIX consoles are
examples of these types of windows.

• A child window opens automatically or as a result of a user activity in a parent

window. Pop-up windows on the Internet can be child windows.

• A message window, or dialog box, is a type of child window. These are usually small
and basic windows that are opened by a program to display information to the user
and/or get information from the user. They usually have a button that must be pushed
before the program can be resumed.
 6

Designing Android GUI -1

ENCHANTMENT is the Key goal.
1.Delight me in surprising ways-
• A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to
experience.
• Subtle effects contribute to a feeling of effortlessness and a sense that a powerful force is
at hand.
2.Real objects are more fun than buttons and menus-
• Allow people to directly touch and manipulate objects in your app.
• It reduces the cognitive effort needed to perform a task while making it more emotionally
satisfying.
3.Let me make it mine-
• People love to add personal touches because it helps them feel at home and in control.
• Provide sensible, beautiful defaults, but also consider fun, optional customizations that
don't hinder primary tasks.
•Get to know me-
• Learn peoples' preferences over time.
• Rather than asking them to make the same choices over and over, place previous choices
within easy reach.
 7

Designing Android GUI -2

SIMPLIFIY MY LIFE goal.
1.Keep it brief-
• Use short phrases with simple words. People are likely to skip sentences if they're long.

2.Real Pictures are faster than words-

• Consider using pictures to explain ideas to perform a task while making it more
emotionally satisfying.
3.Only show what I need when I need it-
• People get overwhelmed when they see too much at once.
• Break tasks and information into small, digestible chunks. Hide options that aren't
essential at the moment, and teach people as they go.
4.I should always know where I am-
1. Give people confidence that they know their way around.
2. Make places in your app look distinct and use transitions to show relationships among
screens. Provide feedback on tasks in progress.
5.If it looks the same, it should act the same-
• Help people discern functional differences by making them visually distinct rather than
subtle. Avoid modes, which are places that look similar but act differently on the same
input.