Scribd
Upload
10 views

UI

Uploaded by

Rafiul Islam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

UI

Uploaded by

Rafiul Islam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 53

CSE 3421

UI and UX

SUMMER 2021
MD. RAFI-UR-RASHID
LECTURER, DEPT. OF CSE, UIU
Why This Lesson?
This is the face of your software. Don’t you
take care of your appearance?
UX vs. UI
UX vs. UI
Example of bad UX

6
Bad UX

Better UX
7
Example of bad UX

8
Example of bad UX

9
Example of bad UX

10
Example of bad UX

11
Most Important Thing

Usability
The effectiveness with which users can accomplish tasks
in a (software) system, as measured by
-Learnability: is it easy to learn?
-Efficiency: once learned, is it fast to use?
-Safety: are errors few and recoverable?
Usability matters: the cost of getting it
wrong

50% of all “malfunctioning” electronic


devices returned to stores are in full
working order, but users can't figure
out how to operate them.

[Elke den Ouden, 2006] Three Mile Island:


nuclear reactor
meltdown caused by
an ambiguous user
interface
A good user interface is hard to
design
 You are not the user
 Most software engineering is about communicating with other
programmers.
 UI is about communicating with users.
 Users are always right …
 Consistent problems are the system’s fault.
Achieving usability: best practices

 User testing and field studies

 Evaluations and reviews by UI experts

 Not getting overwhelmed by additional technicalities


Steps in UI design

 Planning

 Prototyping and sketching

 Optimization

 Implement
Planning

 understand the values standing behind our customer

 Brainstorming and research

 Make Feature List

 Plan the navigation


Sketching & Prototyping
 Also known as wireframe modeling
 It is the skeleton of the eventual user interface.
 Can be done
 Manually (paper-pencil, pen tablet)
 Electronically (Adobe XD, Photoshop, Figma)
 Benefits of prototyping:
 Aids UI implementation
 help discover requirements
 help discover test cases and provide a basis for testing
 allows interaction with user to ensure satisfaction
Two types of User Interace
Graphical User Interface

 GUI permits users to use the graphics to interact with an


operating system.

 It includes windows, scrollbars, buttons, wizards, images, icons


etc.

 It’s intuitive, simple to find out and reduces psychological


feature load.
Command-line User Interface

 CLI permits users to put in writing commands in terminal or


console window to interact with an operating system

 For this users are compelled to remembering command for


performing the task.
Think about the following properties for GUI and CLI:
 User friendliness,
 memory use,
 Processing speed,
 handling complex task,
 flexibility,
 interface upgrades
UI Design Consideration

Schneiderman's 8
Golden Rules
Rule 1: Strive for consistency.
Consistent sequences of actions should be required in similar
situations; identical terminology should be used in prompts,
menus, and help screens; and consistent commands should
be employed throughout.
Rule2: Enable frequent users to use
shortcuts
As the frequency of use increases, so do the user's desires to
reduce the number of interactions and to increase the pace of
interaction. Abbreviations, function keys, hidden commands, and
macro facilities are very helpful to an expert user.
Rule 3: Offer informative feedback
For every operator action, there should be some system feedback. For
frequent and minor actions, the response can be modest, while for
infrequent and major actions, the response should be more substantial.
Rule 4: Design dialog to yield closure

Sequences of actions should be organized into groups with a


beginning, middle, and end. The informative feedback at the
completion of a group of actions gives the operators the satisfaction
of accomplishment, a sense of relief, the signal to drop contingency
plans and options from their minds, and an indication that the way is
clear to prepare for the next group of actions.
Rule 5: Offer simple error handling
As much as possible, design the system so the user cannot
make a serious error. If an error is made, the system should be
able to detect the error and offer simple, comprehensible
mechanisms for handling the error.
Rule 6: Permit easy reversal of actions
This feature relieves anxiety, since the user knows that errors can be undone; it
thus encourages exploration of unfamiliar options. The units of reversibility may be
a single action, a data entry, or a complete group of actions.
Rule 7: Let the user be in control.
Experienced operators strongly desire the sense that they are in
charge of the system and that the system responds to their
actions. Design the system to make users the initiators of actions
rather than the responders.
Rule 8: Reduce short-term memory
load on the user.
The limitation of human information processing in short-term
memory requires that displays be kept simple, multiple page
displays be consolidated, window-motion frequency be
reduced, and sufficient training time be allotted for codes,
mnemonics, and sequences of actions.
UI Design Components
 button
 check box
 radio button
 text field
 list
 combo box
 menu
 dialog box
UI design: buttons, toolbars, menus
 Use buttons for single independent actions
that are relevant to the current screen.
 Use button text with verb phrases such as "Save“
or "Cancel", not generic: "OK", "Yes", "No"
 Use Mnemonics or Accelerators (Ctrl-S)
 Use toolbars for common actions.
 Use menus for infrequent actions that may
be applicable to many or all screens.
 Users hate menus! Try not to rely too much on
menus. Provide another way to access the
same functionality (toolbar, hotkey, etc.)
UI design: toggle, check boxes and
radio buttons
 Use check boxes for independent on/off switches.
 Use radio buttons for related choices, when only one choice can
be activated at a time.
 Toggle for Boolean choice
UI design: text fields, lists, combo
boxes, sliders

 Use text fields (usually with a label) when the


user may type in anything they want.

 Use List/combo boxes when there are many


fixed choices; don't take up screen real estate
by showing them all at once.

 Use a slider or spinner for a numeric value.


UI design: dialogs and panes
 Use a tabbed pane when there are many
screens that the user may want to switch
between at any moment
 Use dialog boxes or option panes to present
temporary screens or options
UI design: pagination
 Use a pagination panel for incorporating
multiple page/table view
 Tooltip is used for showing help/information
UI design: progress and picker
 Use elements for showing progress
 Date and time pickers are used for
setting time and date
Thank You

You might also like