Se201-Software Requirements Analysis
Se201-Software Requirements Analysis
REQUIREMENTS ANALYSIS
LECTURE 11
Project Step 2 Announcement
WIX website builder
https://tr.wix.com/
System users often judge a system by its interface rather than its functionality
Poor user interface design is the reason why so many software systems are never used
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
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.
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
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
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?
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
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
Notes
Check boxes are not mutually exclusive.
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/