SE201-SOFTWARE

REQUIREMENTS ANALYSIS

LECTURE 11
Project Step 2 Announcement
 WIX website builder
 https://tr.wix.com/

 Compare The Top 10 Website Builders

 https://www.webcreate.io/website-builders-comparison/

 Submission Date: 25/12/2020

 Presentation Schedule: 28/12/2020 and 4/01/2021
User Interface Design
The user interface
 User interfaces should be designed to match the skills, experience and expectations of
its anticipated users.

 System users often judge a system by its interface rather than its functionality

 A poorly designed interface can cause a user to make catastrophic errors

 Poor user interface design is the reason why so many software systems are never used

 Software engineers generally must do interface design

Human factors in interface design
 Limited short-term memory
 People can instantaneously remember about 7 items of information. If you present more than this, they are
more liable to make mistakes.

 People make mistakes

 When people make mistakes and systems go wrong, inappropriate alarms and messages can increase stress
and hence the likelihood of more mistakes.

 People are different

 People have a wide range of physical capabilities. Designers should not just design for their own capabilities.

 People have different interaction preferences

 Some like pictures, some like text.
Goal
Make Interface

1) Pleasing to the Eye

2) Simple to Use
3) Minimize the effort it takes for users to accomplish their work

https://www.slideshare.net/JReifman/user-interface-design-4310457
UI design principles
 UI design must take account of the needs, experience and capabilities
of the system users

 Designers should be aware of people’s physical and mental

limitations (e.g. limited short-term memory) and should recognise
that people make mistakes

 UI design principles underlie interface designs although not all

principles are applicable to all designs
Design principles
 User familiarity
 The interface should use terms and concepts which are drawn from the experience
of the people who will make most use of the system.
 The interface should be based on user-oriented terms and concepts rather than
computer concepts.
 For example, an office system should use concepts such as letters, documents,
folders etc. rather than directories, file identifiers, etc.
Design principles
 Consistency
 Extremely important concept in making the system simple

 It allows the users to predict what is going to happen next

 All parts of the system work in the same way

 The interface should be consistent in that, wherever possible, comparable

operations should be activated in the same way.
 Commands and menus should have the same format, command punctuation
should be similar, etc.
 Users learn how one portion works and immediately apply it to others

 It is one of the most important elements in ease of learning, ease of use, and
aesthetics.
Design principles
 Minimal surprise
 Users should never be surprised by the behaviour of a system.

 If a command operates in a known way, the user should be able to predict the
operation of comparable commands
Design principles
 Recoverability
 The system should provide some resilience to user errors and allow the user to
recover from errors.
 This might include an undo facility, confirmation of destructive actions, 'soft'
deletes, etc.
Design principles
 User guidance
 The interface should provide meaningful feedback when errors occur and provide
context-sensitive user help facilities.
 Some user guidance such as help systems, on-line manuals, etc. should be
supplied
Design principles
 User diversity
 Interaction facilities for different types of user should be supported.

 For example, some users have seeing difficulties and so larger text should be
available
Design principles
 Layout Concepts
 Layout refers to organizing areas of the screen or document for different purposes and using those areas
consistently throughout the user interface.
 a top area for commands and navigation,
 a middle area for information to be input or output,
 a bottom area for status information
 Similar items are grouped into areas
 For example, on an order form (or order report), one part may be used for customer information (e.g., name,
address), one part for information about the order in general (e.g., date, payment information), and one part
for the order details (e.g., how many units of which items at what price each).
 Each area is self-contained so that information in one area does not run into another.
 Areas should have a natural intuitive flow
 Users from western nations tend to read from left to right and top to bottom
 Users from other regions may have different flows
Web Page Layout with Multiple Navigation
Areas
The top line in the center site navigation bar
shows that the user is in the Small Business
Computing Channel section of the
winplanet.com site.
Interface flow between sections

The flow between sections should also be consistent, whether horizontal or vertical.

Ideally, the areas will remain consistent in

• size,
• shape,
• placement for the forms used to enter information (whether on paper or on a screen)
• the reports used to present it
Design principles
 Content Awareness
 Refers to the ability of an interface to make the user aware of the information it contains with the
least amount of effort by the user.
 All interfaces should have titles

 Menus should show

 where you are

 where you came from to get there
 It should be clear what information is within each area

 There should be no uncertainty about the format of information within fields, whether for entry or
display.
 For example, a date of 10/5/12 means different things, depending on whether you are in the
United States (October 5, 2012) or in Canada (May 10, 2012).
 Use dates and version numbers to aid system users
Design principles

 Aesthetics
 Interfaces should be functional, inviting to use, and pleasing to the eye

 Simple minimalist designs are generally better

 White space is important to provide separation

 Acceptable information density is proportional to the user’s expertise

 Novice users prefer lower density (< 50%) (i.e., less than 50% of the interface occupied by
information).
 Expert users prefer higher density (> 50%) (because they know where information is located and
high densities reduce the amount of physical movement through the interface)
What was your first
reaction when you
looked at Figure?

This is the most

unpleasant form at the
University of Georgia,
according to staff
members.
High Density
Example
It has too much information
packed into too small a space
with too little white space. It is
not effective for many users.

The form in the figure was

designed for the experienced
staff in the personnel office,
who use it daily, rather than for
the clerical staff in academic
departments, who have less
personnel experience and use
the form only a few times a
year.
Design principles

 Aesthetics-Text Design
 Size
 A larger font size may be used for titles, section headings, etc., and a smaller font for the
report or form content.
 For forms or reports displayed on the screen, consider a minimum of a 12-point font size if the
display monitor is set for a high screen resolution.
Design principles

 Aesthetics-Text Design
 serif (those having letters with serifs, or “tails,” such as Times Roman, most
readable for printed reports) vs. sans serif (Tahoma or Arial, readable for
computer screens)

 Never use all capital letters, except possibly for titles—all-capitals text “shouts” and
is harder to read.

 Italics and underlining should be avoided because they make text harder to read.
Design principles

 Aesthetics - Color
 Color and patterns (e.g., don’t use , black text on a white background
is the most readable)

 Remember, the goal is pleasant readability, not art; colors and patterns should
be used to strengthen the message, not overwhelm it.

 Color has been shown to affect emotion, with red provoking intense emotion
(e.g., anger) and blue provoking lowered emotions (e.g., drowsiness)
Colour displays
 Colour adds an extra dimension to an interface and can help the user understand
complex information structures

 Can be used to highlight exceptional events

 Common mistakes in the use of colour in interface design include:

 The use of colour to communicate meaning
 Over-use of colour in the display
Colour use guidelines
 Don't use too many colours
 Use colour coding to support use tasks
 Allow users to control colour coding
 Design for monochrome then add colour
 Use colour coding consistently
 Avoid colour pairings which clash
 Use colour change to show status change
 Be aware that colour displays are usually lower resolution
Colors
•Positive: Blue, Green
•Negative: Red
•Neutral: Black
•Disable: Grey

Ref: https://blog.prototypr.io/how-to-use-color-in-ui-design-wisely-to-create-a-perfect-ui-interface-6e524bd023bc
Coffee Web Site Examples
Example
 Imagine this, if Mcdonald’s uses gray and black instead of yellow and
red, you still have a hungry appetite?

 Is red color good for kitchen?

Ref: https://blog.prototypr.io/how-to-use-color-in-ui-design-wisely-to-create-a-perfect-ui-interface-6e524bd023bc
Example
 Why talking about blue?
 Just have a look at your most commonly used Apps or sites, Facebook, Twitter,
Microsoft, Safari, etc. What’s in there? Yes, you’ll see, they are all in blue. Various
kinds of blue.

 According to the research, blue is the NO.1 color that women and men both like.
 Blue is definitely a safe color that can cultivate user’s trust and be accepted, blue is a
typical example of color in UI design. If you have no better choice, just use blue.

Ref: https://blog.prototypr.io/how-to-use-color-in-ui-design-wisely-to-create-a-perfect-ui-interface-6e524bd023bc
Color preferences according to gender

Color preferences according to gender and sexual orientation, Lee Ellis and Christopher Ficek
Color preferences according to gender

Men like blue, green, and

black. It’s definitely a
disaster if you doing a
sporting design in purple.

Just remember, whenever

you are targeting to men,
choose the color that conveys
maleness.

Similarly, use female color to

do the design that mainly
used by ladies.

http://www.joehallock.com/?page_id=1281
Global brands create ‘social distancing’ versions of their
logos to encourage coronavirus safety

 Car brand
Audi
 Mcdonald
 Coca-Cola
 Car brand
Volkswagen 
Design principles

 User Experience
 Designing the user interface with the users’ level of computer experience in mind.

 Ease of learning- how quickly and easily they can learn to use the system
 Significant issue for inexperienced (novice) users
 Relevant to systems with a large user population

 Ease of use- how quickly and easily they can complete a task with the system once they have
learned how to use it
 Significant issue for expert users
 Most important in specialized systems
Design principles

 User Experience
 Ease of learning and use of use are related

 Complementary: lead to similar design decisions

 Conflicting:designer must choose whether to satisfy novices or experts

 Novices, for example, often prefer menus that show all available system functions,
because these promote ease of learning.
 Experts, on the other hand, sometimes prefer fewer menus that are organized around
the most commonly used functions.
Design principles
 Minimize Effort
 The interfaces should be simple and minimize the number of clicks or keystrokes to move
from one part of the system to another.
 Three clicks rule
 Commonly used by interface designers
 Users should be able to go from the start or main menu of a system to the information or
action they want in no more than three mouse clicks or three keystrokes
Types of Inputs
 Data items linked to fields
 Text
 Numbers
 Selection boxes
o Check boxes
o Radio buttons
o On-screen list boxes
o Drop-down list boxes
o Combo boxes
o Sliders
Types of Input Forms (cont.)

 Text As the name suggests, a text box is

used to enter text.
 Text boxes can be defined to have a fixed
length or can be scrollable and accept a
virtually unlimited amount of text. In either
case, boxes can contain single or multiple
lines of textual information.
 Never use a text box if you can use a
selection box.
 Text boxes should permit standard GUI
functions such as cut, copy, and paste.
 Types of Input Forms (cont.)

 Numbers A number box is used to enter

numbers. Some software can automatically
format numbers as they are entered, so that
3452478 becomes $34,524.78.
 Dates are a special form of numbers that
sometimes have their own type of number box.
 Never use a number box if you can use a
selection box.
Check Box
 Presents a complete list of choices, each with a square box in front.
 When to Use
 When several items can be selected from a list of items

 Notes
 Check boxes are not mutually exclusive.

 Do not use negatives for box labels.

 Check-box labels should be placed in some logical order, such as that defined by the
business process, or failing that, alphabetically or most commonly used first.
 Use no more than 10 check boxes for any particular set of options. If you need more
boxes, group them into subcategories.
Radio Button
 Presents a complete list of mutually exclusive choices, each with a circle in front.
 When to Use
 When only one item can be selected from a set of mutually exclusive items

 Notes
 Use no more than six radio buttons in any one list; if you need more, use a drop-down list
box.
 If there are only two options, one check box is usually preferred to two radio buttons,
unless the options are not clear.
 Avoid placing radio buttons close to check boxes to prevent confusion between different
selection lists.
On-screen list box
 Presents a list of choices in a box.
 When to Use
 Seldom or never—only if there is insufficient room for check boxes or radio buttons
 Notes
 This box can permit only one item to be selected (in which case it is an ugly version of radio buttons).
 This box can also permit many items to be selected (in which case it is an ugly version of check boxes), but users
often fail to realize that they can choose multiple items.
 This box permits the list of items to be scrolled, thus reducing the amount of screen space needed.
Drop-down list box
 Displays selected item in one-line box that opens to reveal list of choices.
 When to Use
 When there is insufficient room to display all choices

 Notes
 This box acts like radio buttons, but is more compact.

 This box hides choices from users until it is opened, which can decrease ease of use; conversely,
because it protects novice users from seldom-used choices, it can improve ease of use.
 This box simplifies design if the number of choices is unclear, because it takes only one line when
closed.
Combo box
 A special type of drop-down list box that permits user to type as well as scroll the list.
 When to Use
 Shortcut for experienced users
 Notes
 This box acts like a drop-down list, but is faster for experienced users when the list of items is long.
Scroll Bar (Vertical or horizontal)
 Graphic scale with a sliding pointer to select a number.
 When to Use
 When entering an approximate numeric value from a large continuous scale

 Notes
 The slider makes it difficult for the user to select a precise number.

 Some sliders also include a number box to enable the user to enter a specific number.
Types of Input Forms (cont.)
 Check boxes (for multiple selections) and radio
buttons (for single selections) both require all
list items to be displayed at all times, thus
requiring more screen space, but since they
display all choices, they are often simpler for
novice users.
Example of poor interface
References
 Software Engineering. Ian Sommerville
 Systems Analysis and Design. Dennis,Wixom and Roth
 https://www.invisionapp.com/design-defined/user-interface-design/